使用JQuery从嵌套的JSON创建HTML表
使用JQuery从嵌套的JSON创建HTML表
提问于 2019-03-26 12:55:04
我有一个示例JSON，如下所示：
}
"vehicles":"4door",
"cars": {
"Toyota":"Camry",
"Ford":"Explorer",
"Nissan":"Altima",
"Jeep":"Wrangler"
},
"color":"red"
}我正在尝试创建一个有2列的超文本标记语言表格，名称类似于" make“和"Model”，使用带有JQuery的示例JSON，使用JSON中的"cars“数组，而不使用其他项目车辆和颜色。"Make“将是JSON的键，而"Model”将是键的值。我试着让它看起来像下面这样，但以表格的形式。任何帮助或建议都将不胜感激。
Make Model
Toyota Camry
Ford Explorer
Nissan Altima
Jeep Wrangler回答 5
Stack Overflow用户
回答已采纳
发布于 2019-03-26 13:00:45
使用Object.keys，它将提供一个keys数组，然后您可以迭代它并从对象中获取key value，然后使用模板文字创建一行，最后附加到table
let cars = {
"Toyota": "Camry",
"Ford": "Explorer",
"Nissan": "Altima",
"Jeep": "Wrangler"
}
let getKeys = Object.keys(cars);
let row = '';
for (let i = 0; i < getKeys.length; i++) {
row += `<tr><td>${getKeys[i]}</td><td>${cars[getKeys[i]]}</td></tr>`
}
$('#carTable').append(row)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='carTable'>
</table>
Stack Overflow用户
发布于 2019-03-26 12:58:57
使用Object.keys获取汽车的数组，并使用forEach循环遍历它们。在jquery中使用append将行追加到表中
var data = {
"vehicles": "4door",
"cars": {
"Toyota": "Camry",
"Ford": "Explorer",
"Nissan": "Altima",
"Jeep": "Wrangler"
},
"color": "red"
}
var str='';
Object.keys(data.cars).forEach(e => {
str+='<tr><td>' + e + '</td><td>' + data.cars[e] + '</td></tr>';
})
$('#data').append(str)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
<tr>
<td>Make</td>
<td>Model</td>
</tr>
</table>
Stack Overflow用户
发布于 2019-03-26 13:06:07
您还可以从脚本创建整个html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var html = ""
var json = {
"vehicles":"4door",
"cars": {
"Toyota":"Camry",
"Ford":"Explorer",
"Nissan":"Altima",
"Jeep":"Wrangler"
},
"color":"red"
}
html = "<table><thead><th><td>Make</td><td>Model</td></th></thead><tbody>"
for(var x in json.cars){
html+= "<tr><td>"+ x +"</td><td>"+ json.cars[x] +"</td></tr>"
}
html+="</tbody></table>"
$("#main").append(html)
});
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55350082
复制相关文章
相似问题
腾讯云开发者
