Как отобразить массив json в формате таблицы?

Question

У меня есть массив 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 для достижения этой функции. Не могли бы вы мне помочь?

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

    } 

Answer 2

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" 
    } 
], 
tablearr; 

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>'; 
    tablearr.push(temp); 
} 

$('table tbody').append(tablearr.join('')); 

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

Answer 4

с помощью 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); 
});