javascript - 使用 jQuery 从 JSON 创建 3 个表列

Question

我正在使用 jQuery 从 JSON 制作一个表格，但由于 JSON 的结构，我很难渲染最后一列，而且其他列也没有完全按照我想要的方式显示。

我尝试在最后一列中使用 $.each 和 for 循环，但我尝试过的都没有修复它。

JSON 看起来像:

     {
         "countries": ["US", "UK", "France", "Germany"],
         "months": ["May-2012", "June-2012", "July-2012"],
         "types": [{
             "type": "Democrat"
         }, {
             "type": "Republican"
         }, {
             "type": "Green"
         }, ]
     }

我的 jQuery 是:

 var target = $('#targettable');
 target.empty();

 $(target).append($('<tr />')
     .append($('<th />').text('Countries'))
     .append($('<th />').text('Months'))
     .append($('<th />').text('Types')));

 $('<tr>')
     .append($('<td>', {
     'text': myJSON.countries
 }))
     .append($('<td>', {
     'text': myJSON.months
 }))

     .append($('<td>', {
     'text': myJSON.types.type
 }))
     .appendTo(target);

我把它弄乱了http://jsfiddle.net/ZukKR/

最后一列根本不显示，其他两列也没有显示为所需的，我认为它会为每个项目创建一行。

基本上，一列是国家/地区列表，下一列是月份列表，最后一列是类型列表。不确定我还能尝试什么？

Answer 1

给你:

myJSON = {
    "countries": ["US", "UK", "France", "Germany"],
    "months": ["May-2012", "June-2012", "July-2012"],
    "types": [{
        "type": "Democrat"
    }, {
        "type": "Republican"
    },{
        "type": "Green"
    },
    ]
}


var target = $('#targettable');
target.empty();

$(target).append($('<tr />')
    .append($('<th />').text('Countries'))
    .append($('<th />').text('Months'))
    .append($('<th />').text('Types'))
);

types = [];
for(var i = 0 ; i < myJSON.types.length; i ++){
    types.push(myJSON.types[i]['type']);
}

$('<tr>')
    .append($('<td>', {
        'text': myJSON.countries
    }))
    .append($('<td>', {
        'text': myJSON.months
    }))              
    .append($('<td>', {
        'text': types
    }))
    .appendTo(target);