时间戳

首页 > 解决方案 > 从开关盒中检索数据

javascript - 从开关盒中检索数据

问题描述

我从 Javascript 开始，我的任务是从 API 检索数据。

今天我是一个步骤，我必须根据用户的请求过滤我的数据。

在这里，我想检索 html 的值，然后将其连接到 JS 中的 switch case。然后根据用户选择的值获取API的URL。

为了让您理解，代码中存在的 URL 等于数据库，我想选择要在我的表中显示的数据库。

我不知道我是否让自己明白了。无论如何，我与您分享我的代码。我一直在我的大脑周围，我可能错过了一些东西。任何帮助将不胜感激。谢谢

function boutonSubmit(){

bounceType = document.getElementById('BouncesType').value;
datestart = document.getElementById('dateS').value;
dateend = document.getElementById('dateE').value;
//bounceCode = getElementById('#dateS').value;  

var SelectDB = document.getElementById('selectdb').value;

switch(SelectDB){
    case 'Desclopinette':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=867XXXXXXXXXXXvGN&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break; 
    
    case 'Chrysolum':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=utxyiwq1K8S04WauVIa0&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;  
        
    case 'Acanthius':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=v6PjXXXXXXXXXXX8y682&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;    

    case 'Bellapourpre':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=xj530XXXXXXXXXXXRIZlD&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;  
    
    case 'Alibigratis':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=SwyXXXXXXXXXXXdKz7z&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Bullecreatif':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=CN7XXXXXXXXXXXw30llOD&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Cacologia':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=oxjs3XXXXXXXXXXXeGjg&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Elenaparc':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=t02ZrrXXXXXXXXXXXoBm1&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Histoiredepoint':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=juiHFXXXXXXXXXXXSY68y5V&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Iatraliptice':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=LW24pXXXXXXXXXXXTfa28U&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Maitrechic':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=ZbpXXXXXXXXXXXy0S&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Neojaune':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=TA3XXXXXXXXXXXeBJlvc&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'OreilledeLapin':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=uqTXXXXXXXXXXXzf0Eg&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;

    case 'Princecalme':
    `https://api7.esv2.com/v2/Api/Bounces?apiKey=3phXXXXXXXXXXXvO4M4lZ9&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
        break;
                default:
                    console.log(`Sorry, we are out of ${Selectdb}`)
            
}

        // Is this the right thing to fetch?
        fetch(SelectDB)
            .then((response) => response.text())
            .then((txtResponse) => {
            data = txtResponse;
            console.log(data);
            data = csvJSON(data);
        
            const tbody = document.querySelector('#user-table tbody');
            
            tbody.innerHTML = '';

            

            data.forEach( (user) => {
            const entry = document.createElement('tr')
        
        entry.innerHTML = `

            <tr>
                <td class="column1">${user.Date}</td>
                <td class="column2">${user.Email}</td>
                <td class="column3">${user.BounceCode}</td>
                <td class="column3">${user.BounceType}</td>
            </tr>
            `;
          
            tbody.appendChild(entry);
                });
}

标签： javascripthtmlapi

解决方案

我想你最好用更适合你的情况的东西替换开关盒。您可以在常量变量中排除基本 API URL

const DATABASE_API = 'https://api7.esv2.com/v2/Api'

然后用 apiKeys 创建单独的 key=value 对象是有意义的

const DB_API_KEYS = {
    Desclopinette: 'v6PjXXXXXXXXXXX8y682',
    Chrysolum: 'utxyiwq1K8S04WauVIa0',
    // and so on...
}

之后你就可以使用完整的 url 构造了

const dbApiKey = DB_API_KEYS[SelectDB]

if (dbApiKey === undefined) {
    console.log(`Sorry, we are out of ${Selectdb}`)
    // throw or something
}

const url = `${DATABASE_API}/Bounces?apiKey=${dbApiKey}&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`

最后

fetch(url)

推荐阅读