如何以表格格式显示json数组？ [复制]

Posted 2023-03-05

【中文标题】如何以表格格式显示json数组？ [复制]

【英文标题】：How to display a json array in table format? [duplicate]

【发布时间】：2013-08-26 02:24:45

【问题描述】：

我有一个这种格式的 json 数组：

[
    
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    ,
    
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    ,
    
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    
]

现在，我想用 javascript 或 jQuery 以表格格式解析和显示它。该表有四列，每一列表示该数组中每个元素的每个属性。该表的第一行是这四个键的名称。其他行是这些键的值。

我不知道怎么写一段JavaScript代码来实现这个功能。你能帮我解决这个问题吗？

【问题讨论】：

你有什么尝试过的吗？

可能重复。 github.com/afshinm/Json-to-html-Table 一年前@Afshin Mehrabani 已经建议了该链接。试一试

这是学校作业吗？这是我第二次看到这个确切的问题，只是另一个用户

看到人们回答一个显示零研究工作的问题让我感到难过:(这个问题已经被问过很多次了。

有人已经为此提供了答案，***.com/questions/13947067/…

【参考方案1】：

DEMO

var obj=[
        
            id : "001",
            name : "apple",
            category : "fruit",
            color : "red"
        ,
        
            id : "002",
            name : "melon",
            category : "fruit",
            color : "green"
        ,
        
            id : "003",
            name : "banana",
            category : "fruit",
            color : "yellow"
        
    ]
    var tbl=$("<table/>").attr("id","mytable");
    $("#div1").append(tbl);
    for(var i=0;i<obj.length;i++)
    
        var tr="<tr>";
        var td1="<td>"+obj[i]["id"]+"</td>";
        var td2="<td>"+obj[i]["name"]+"</td>";
        var td3="<td>"+obj[i]["color"]+"</td></tr>";

       $("#mytable").append(tr+td1+td2+td3); 

       

【讨论】：

我正在使用.each，它只显示最后一个值。.append 在 2 个嵌套的 .each 中。 jQuery.each(arrayobj, function(key, value) jQuery.each(value, function(label, answer) display = '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>'); ); $('#tbody').append(display);

标题在哪里？

【参考方案2】：

使用jquery $.each，您可以访问所有数据，也可以像这样在表格中设置

<table style="width: 100%">
     <thead>
          <tr>
               <th>Id</th>
               <th>Name</th>
               <th>Category</th>
               <th>Color</th>
           </tr>
     </thead>
     <tbody id="tbody">
     </tbody>
</table>

$.each(data, function (index, item) 
     var eachrow = "<tr>"
                 + "<td>" + item[1] + "</td>"
                 + "<td>" + item[2] + "</td>"
                 + "<td>" + item[3] + "</td>"
                 + "<td>" + item[4] + "</td>"
                 + "</tr>";
     $('#tbody').append(eachrow);
);

【讨论】：

嘿 NaYan 这对我不起作用..仅显示最后一个数组值。我正在使用嵌套的.each。 jQuery.each(arrayobj, function(key, value) jQuery.each(value, function(label, answer) display = '<tr><td>'+label+ '</td><td>' +answer+'</td></tr>'); ); $('#tbody').append(display);

嘿禁止SO，你的代码必须是这样的：jQuery.each(arrayobj, function(key, value)jQuery.each(value, function(label, answer)display = '

' + 标签 + ' ' + 答案 + '';$('#tbody').append(display););) ;

【参考方案3】：

var jArr = [

    id : "001",
    name : "apple",
    category : "fruit",
    color : "red"
,

    id : "002",
    name : "melon",
    category : "fruit",
    color : "green"
,

    id : "003",
    name : "banana",
    category : "fruit",
    color : "yellow"

]

var tableData = '<table><tr><td>Id</td><td>Name</td><td>Category</td><td>Color</td></tr>';
$.each(jArr, function(index, data) 
 tableData += '<tr><td>'+data.id+'</td><td>'+data.name+'</td><td>'+data.category+'</td><td>'+data.color+'</td></tr>';
);

$('div').html(tableData);

【参考方案4】：

var data = [
    
        id : "001",
        name : "apple",
        category : "fruit",
        color : "red"
    ,
    
        id : "002",
        name : "melon",
        category : "fruit",
        color : "green"
    ,
    
        id : "003",
        name : "banana",
        category : "fruit",
        color : "yellow"
    
];

for(var i = 0, len = data.length; i < length; i++) 
    var temp = '<tr><td>' + data[i].id + '</td>';
    temp+= '<td>' + data[i].name+ '</td>';
    temp+= '<td>' + data[i].category + '</td>';
    temp+= '<td>' + data[i].color + '</td></tr>';
    $('table tbody').append(temp));