[英]Display json data in table format in html
我有以下json是ajax調用的響應。
[
{
"Key1":"value1",
"key2":{
"subkey1":"subvalue",
"subkey2":"subvalue2"
}
},
{
"Key1":"value1",
"key2":{
"subkey1":"subvalue3",
"subkey2":"subvalue4"
}
}
]
我必須在html表中顯示鍵2的值。
subkey1 subkey2
--------- ---------
subvalue1 subvalue2
subvalue3 subvalue4
請注意,列數也是動態的。
您可以使用Object.keys()
從第一個對象獲取鍵來設置標題。 然后使用each()
遍歷數組以設置表主體。
請嘗試以下方式:
var arrData = [ { "Key1":"value1", "key2":{ "subkey1":"subvalue1", "subkey2":"subvalue2" } }, { "Key1":"value1", "key2":{ "subkey1":"subvalue3", "subkey2":"subvalue4" } } ] var col = Object.keys(arrData[0].key2); $('table').append('<thead><tr><th>' +col[0]+'</th><th>' +col[1]+'</th></tr></thead>'); $(arrData).each(function(i,v){ $('#tbody').append('<tr><td>' +v.key2.subkey1+'</td><td>' +v.key2.subkey2+'</td>'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="tbody"></tbody> </table>
var response = [
{
"Key1":"value1",
"key2":{
"subkey1":"subvalue",
"subkey2":"subvalue2"
}
},
{
"Key1":"value1",
"key2":{
"subkey1":"subvalue3",
"subkey2":"subvalue4"
}
}
];
var columns = [];
if(response.length >0) {
var item = response[0];
columns = Object.keys(item['key2']);
}
var htmlStr = '<table><tr>';
columns.map(function(col){
htmlStr += '<th>'+col+'</th>';
});
htmlStr += '</tr>';
response.map(function(item){
htmlStr += '<tr>';
columns.map(function(colName){
htmlStr += '<td>' + item.key2[colName]+'</td>';
});
htmlStr += '</tr>';
});
document.getElementById('table').innerHTML = htmlStr + '</table>';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.