Question

我正在以这种格式收到JSON数据： -

{
"sEcho":1,
"total":"1710",
"aaData":[
    [
        "Help",
        "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76fab1e95bd.mp3?King_of_Spain_Entropy_02_Animals_Part_1.mp3",
        "1784",
        "3",
        0,
        null,
        "0000-00-00 00:00:00"
    ],
    [
        "A Day In The Life",
        "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76f5fc253a1.mp3?JenWood_Zeppelin.mp3",
        "3573",
        "3",
        0,
        null,
        "0000-00-00 00:00:00"
    ]
}

使用典型的jquery ajax请求，如下所示： -

 $.ajax({
    "dataType": 'json',
    "url": '/wp-content/hovercard.php',
    "data": 'order=' + $orderValue + '&orderColumn=' + $columnValue,
    "success": function(data, textStatus, jqXHR) {


        //loop JSON array and build html string here, then append it.

         }

  });

如何遍历此JSON数组中的嵌套对象以构建“TR”节点列表，然后将它们插入表中？

如果我在上面的JSON数组示例中使用第一个数据对象，我希望返回的html字符串如下： -

 <tr class="odd">
      <td> + help + </td>
      <td><a href=" + http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76fab1e95bd.mp3?King_of_Spain_Entropy_02_Animals_Part_1.mp3 + "> + help + </a></td>
      <td> + 1784 + </td>
      <td> + 3 + </td>
      <td> + 0 + </td>
      <td> + null + </td>
      <td> + 0000-00-00 00:00:00 + </td>
</tr>

如上所示，为了使“tr”类更加混乱，需要为每个数据索引替换一类“偶数”。

然后，一旦构建了所有'tr'节点的完整html字符串并将其保存到变量中（让我们使用$ newContent），我想将它附加到表中。即。

$('#my_table').append($newContent);

到目前为止，我已经研究了如何迭代数据并创建所需的'tr'节点： -

  var array = data.aaData;
    var textToInsert = [];
    var i = 0;

                $.each(array, function(count, item) { 
                textToInsert[i++]  = '<tr><td class="odd">';
                textToInsert[i++] = item;
                textToInsert[i++] = '</td></tr>';
                                    });

$('#favourites-hovercard-table-'  + $artistid ).append(textToInsert.join(''));

但我正在努力迭代嵌套数据并构建所需的'td'节点以及交替奇数/偶数类。

Answer 1

更好地使用Jquery Template http://api.jquery.com/jQuery.template/，可以非常轻松地更新表格中的数据。

Answer 2

我建议使用正确的DOM操作而不是创建字符串：

var $table = $('#favourites-hovercard-table-'  + $artistid );

$.each(data.aaData, function(i, row) {
    var $tr = $('<tr />', {'class': (i % 2) ? 'odd' : 'even'});
    $.each(row, function(j, value) {
        $tr.append($('<td />', {text: value})); 
    });
    $table.append($tr)
});

Answer 3

你可以做这样的事情

var data = {
"sEcho":1,
"total":"1710",
"aaData":[
    [
        "Help",
        "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76fab1e95bd.mp3?King_of_Spain_Entropy_02_Animals_Part_1.mp3",
        "1784",
        "3",
        0,
        null,
        "0000-00-00 00:00:00"
    ],
    [
        "A Day In The Life",
        "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76f5fc253a1.mp3?JenWood_Zeppelin.mp3",
        "3573",
        "3",
        0,
        null,
        "0000-00-00 00:00:00"
    ]
   ]
}
var str = ""
for (var item in data.aaData){
    str += '<tr>';
    for(idata in data.aaData[item]){
        str += '<td>'+data.aaData[item][idata]+'</td>';
    }
    str += '</tr>';
}


$('body').append("<table>"+str+"</table>");

但你可能想要使用jGrid或其他一些插件

如何遍历这个嵌套对象JSON数组并使用jQuery构建一个html字符串

3 个答案: