使用JQuery從嵌套JSON創建HTML表
[英]Creating a HTML Table from nested JSON using JQuery
問題描述
我有一個這樣的示例JSON：
}
"vehicles":"4door",
"cars": {
"Toyota":"Camry",
"Ford":"Explorer",
"Nissan":"Altima",
"Jeep":"Wrangler"
},
"color":"red"
}
我正在嘗試使用帶有JSON的示例JSON和JQuery並使用JSON中的“ cars”數組來創建帶有2個列的HTML表，這些列稱為“ Make”和“ Model”，而不會占用其他項目的顏色。 “ Make”將是JSON的鍵，而“ Model”將是鍵的值。 我試圖讓它看起來像下面這樣，但以表格格式。 任何幫助或建議，將不勝感激。
Make Model
Toyota Camry
Ford Explorer
Nissan Altima
Jeep Wrangler
5 個解決方案
解決方案1
2 2019-03-26 04:58:56
使用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>
解決方案2
2 已采納 2019-03-26 05:00:44
使用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>
解決方案3
0 2019-03-26 05:06:06
您還可以從腳本創建整個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>
解決方案4
0 2019-03-26 05:38:21
在這里我看到json格式不正確，也將jsonObject.KeyName保留在變量中，然后循環保存變量的json。
var obj = {"Toyota":"Camry", "Ford":"Explorer", "Nissan":"Altima", Jeep":"Wrangler"};
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var val = obj[key];
console.log(val);
}
}
之后，您將以html格式實現。
解決方案5
0 2019-03-26 06:32:09
var data = {
"vehicles": "4door",
"cars": {
"Toyota": "Camry",
"Ford": "Explorer",
"Nissan": "Altima",
"Jeep": "Wrangler"
},
"color": "red"
};
var cars = data.cars; // for better performance if large table
var tableData = Object.keys(cars).map(item => '<tr><td>' + item + '</td><td>' + cars[item] + '</td></tr>').join('');
$('#main>table').append(tableData)
<div id="main">
<table>
<tr>
<td>Make</td>
<td>Model</td>
</tr>
</table>
</div>
使用JSON中的嵌套jQuery生成表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.