使用JSON在Javascript中生成动态表

时间:2016-04-26 20:07:34

标签: javascript html json

我想制作一个用JSON构建的Javascript表。这个JSON是从后端发送的(使用Django),因此可以随时更改。 列的名称将是类别。我的JSON表单如下:

var data = [
{
    "title": "Leadership",
    "category": "humaninteraction"
},
{
    "title": "Maintenance procedures",
    "category": "procedures"
},
{
    "title": "Situational Awareness",
    "category": "environmentsituations"
},
{
    "title": "Self-Criticism",
    "category": "self"
},
{
    "title": "Tools",
    "category": "aircraft"
}]; 

1 个答案:

答案 0 :(得分:2)

您可以使用$.getJSON()从后端获取JSON并使用$.each()构建每一行。像这样:

function generateTable(){    
    var rows = '';
    $.getJSON( "backend/method", function( data ) {
      $.each( data, function( key, val ) {
        rows += '<tr>';
        rows += '<td>' + data.title + '</td>';
        rows += '<td>' + data.category+ '</td>';
        rows += '</tr>';
      });
    });
    $('#tableId').append(rows);
}