从交换机案例中检索数据

Question

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

今天，我必须根据用户的请求过滤我的数据。

在这里，我想检索html的值，然后将其连接到JS中的switch案例。然后根据用户选择的值获取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);
});
}

Answer 1

我想您最好用更适合您的情况的东西来替换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)