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);
                });
}

函数boutonSubmit（）{
bounceType=document.getElementById（'bounceType'）。值；
datestart=document.getElementById（'dateS'）。值；
dateend=document.getElementById（'dateE'）。值；
//bounceCode=getElementById（'#dateS'）。值；
var SelectDB=document.getElementById（'SelectDB'）。值；
开关（选择DB）{
“Declopinette”案例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=867XXXXXXXXXXXvGN&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“温色溶胶”一案：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=utxyiwq1K8S04WauVIa0&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“阿坎修斯”案：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=v6PjXXXXXXXXXXX8y682&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“Bellapourpre”案：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=xj530XXXXXXXXXXXRIZlD&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“不合法”一案：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=SwyXXXXXXXXXXXdKz7z&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“Bullecreatif”案例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=CN7XXXXXXXXXXXw30llOD&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“Cacologia”案例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=oxjs3XXXXXXXXXXXeGjg&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“Elenaparc”案例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=t02ZrrXXXXXXXXXXXoBm1&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
案例“HistoriDepoint”：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=juiHFXXXXXXXXXXXSY68y5V&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“医疗欺诈”案例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=LW24pXXXXXXXXXXXTfa28U&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“弥勒式”案例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=ZbpXXXXXXXXXXXy0S&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“黄疸”病例：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=TA3XXXXXXXXXXXeBJlvc&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“OreilledeLapin”案：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=uqTXXXXXXXXXXXzf0Eg&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
“Princecalme”案：
`https://api7.esv2.com/v2/Api/Bounces?apiKey=3phXXXXXXXXXXXvO4M4lZ9&startDate=${this.datestart}&endDate=${this.dateend}&bounceType=${this.bounceType}`
打破
违约：
log（`Sorry，我们没有${Selectdb}`）
}
//这是取回的东西吗？
获取（SelectDB）
.然后（（response）=>response.text（））
。然后（（txtResponse）=>{
数据=TXT响应；
控制台日志（数据）；
data=csvJSON（数据）；
const tbody=document.querySelector（“#user table tbody”）；
tbody.innerHTML=''；
data.forEach（（用户）=>{
const entry=document.createElement（'tr'）
entry.innerHTML=`
${user.Date}
${user.Email}
${user.BounceCode}
${user.BounceType}
`;
          
t正文.附件（条目）；
});
}

我想您最好用更适合您的情况的东西来替换switch case。您可以在常量变量中排除基本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)