使用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/

最后一列根本不顯示，而其他2個arent顯示為通緝，我想這將為每個項目創建一行。

因此，基本上一列是國家列表，下一列是月份列表，最后一列是類型列表。 不知道我還能嘗試什么？

Answer 1

試試這個（ 演示 ）：

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

var target = $('#targettable'),
    table = '<tr><th>Countries</th><th>Months</th><th>Types</th></tr>';

for (var i = 0; i < myJSON.countries.length; i++) {
    table += '<tr>' +
        '<td>' + myJSON.countries[i] + '</td>' +
        '<td>' + myJSON.months[i] + '</td>' +
        '<td>' + myJSON.types[i].type + '</td>' +
        '</tr>';
}

target.html(table);

注意：

• 如果條目數量不匹配，將出現js錯誤，我必須添加一個額外的月份並輸入條目。
• 由於大量的DOM交互，對每個JSON條目使用append會使構建表的速度變慢，因此最好構建一個字符串，然后只應用表一次。

Answer 2

它比您最初想像的要復雜一些-

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

     for (var i = 0; i < myJSON.countries.length; i++) {
         $(target).append('<tr />');
         $('tr:last').append($('<td>', {
             'text': myJSON.countries[i]
         }));
         $('tr:last').append($('<td>', {
             'text': myJSON.months[i]
         }));
         $('tr:last').append($('<td>', {
             'text': myJSON.types[i].type
         }));
     }

這是一個示例-http://jsfiddle.net/ZukKR/2/

您可以在這里做很多事情，以提高效率：保存字符串並立即將其全部寫出，縮短append語句以使其成為一個字符串，依此類推。

Answer 3

干得好：

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

Answer 4

在這個jsfiddle中

- no errors in the console.
- the headers of the columns are dynamic
- the table extends with the longest column

myJSON = {
    "countries": ["US", "UK", "France", "Germany"],
    "months": ["May-2012", "June-2012", "July-2012","well","this"],
    "types": [
        {
            "type": "Democrat"
        }, {
            "type": "Republican"
        }, {
            "type": "Green"
        }
    ]
}    
var target = $('#targettable');
var longest =null;
var thead = $('<tr />');
$.each(myJSON, function(index, value){
    if(longest === null) longest = index;
    else if(myJSON[longest].length < myJSON[index].length) longest = index;

    thead.append($("<th>").text(index));
});

target.find("thead").append(thead);

for (var i = 0; i < myJSON[longest].length; i++) {
    $(target).append('<tr />');
    $('tr:last').append($('<td>', {
        'text': myJSON.countries[i]?myJSON.countries[i]:""
    }));
    $('tr:last').append($('<td>', {
        'text': myJSON.months[i]?myJSON.months[i]:""
    }));
    $('tr:last').append($('<td>', {
        'text': myJSON.types[i] && myJSON.types[i].type?myJSON.types[i].type:""
    }));
};