如何以表格格式显示json数组？

小编典典

如何以表格格式显示json数组？

json

我有这种格式的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代码来实现此功能。你能帮我吗？

阅读 332

2020-07-27

共1个答案

小编典典

演示

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

    }

2020-07-27