如何以表格形式显示JSON数组?

18

我有一个这样格式的 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代码来实现此功能。你能帮助我吗?


8
你尝试过什么吗? - kayen
2
可能是重复内容。https://github.com/afshinm/Json-to-HTML-Table 这个链接已经在一年前被@Afshin Mehrabani提出过了。你可以试试看。 - Tyro Hunter
这是一个学校作业吗?这是我第二次看到完全相同的问题,只不过提问者不同。 - Roko C. Buljan
1
有人已经为此提供了答案,http://stackoverflow.com/questions/13947067/create-html-table-in-javascript-with-json-or-jquery - Sushrut
我情不自禁地……fiddle - jahroy
显示剩余3条评论
4个回答

26

演示

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在两个嵌套的.each中。jQuery.each(arrayobj, function(key, value){ jQuery.each(value, function(label, answer){ display = ''+label+ '' +answer+''}); }); $('#tbody').append(display); - Neocortex
1
头文件在哪里? - Rob

11

使用 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 = ''+label+ '' +answer+''}); }); $('#tbody').append(display); - Neocortex
嘿,被 Stack Overflow 禁言的朋友,你的代码应该像这样:jQuery.each(arrayobj, function(key, value){jQuery.each(value, function(label, answer){display = '<tr><td>' + label + '</td><td>' + answer + '</td></tr>';$('#tbody').append(display);});}); - NaYaN

3
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));
}

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);

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接