我有一个用Vanilla JavaScript编写的ajax请求,它从服务器获取一个JSON文件。但这表现不佳。这是我的代码:
var data = {
"Description1": {
"key1": "Value 1 here",
"key2": "Value 2 here",
"key3": "Value 3 here"
},
"Description2": {
"key1": "Value 1 here",
"key2": "Value 2 here",
"key3": "Value 3 here"
}
}
var table = document.querySelector('table');
var options = document.getElementById('option1Id');
var rows = '';
for (var p in data) {
for (var k in data[p]) {
if(options.selectedValue == 'Description1'){
rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
}
else if(options.selectedValue == 'Description2'){
rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
}
}
}
table.innerHTML = rows;
HTML代码段:
<table></table>
<select id="dropdown" onchange="getJson()">
<option value="description1">Description1</option>
<option value="description2">Description2</option>
</select>
JSON正在填充表格,每次从下拉列表中选择不同的选项时,表格中的数据都会发生变化。但是,这需要大约10秒或更长时间才能加载,并且JSON文件中的键/值对少于100个。有时它根本不会加载,有时,当我在下拉列表中更改值时,它会滞后。这很慢。有什么办法可以让这段代码变得更快吗?任何使这项表现更好的建议将不胜感激。
答案 0 :(得分:0)
尝试这样的事情
var rows='';
d1=data.Description1
d2=data.Description2
for (var k in d1[p]) {
rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
}
for (var k in d2[p]) {
rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
}
//multiple for combined with if statement affect the speed
&#13;