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

问题描述：

我正在接收以下格式的JSON数据:-

I am recieving JSON data in this format:-

{
"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请求，如下所示:-

Using a typical jquery ajax request like so:-

 $.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"节点列表，然后将它们插入表中?

How do I loop through the nested objects within this JSON array in order to build a list of 'TR' nodes and then insert them into a table?

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

If I use the first data object in my JSON array example above, I would like the html string returned like this:-

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

为使事情更加混乱，如上所示，对于每个数据索引，都需要将其与偶数"类交替使用.

To make matters more confusing the 'tr' class of "odd" as shown above, needs to be alternated with a class of "even" for each data index.

然后，一旦所有"tr"节点的完整html字符串都已构建并保存到变量中(让我们使用$ newContent)，我想将其附加到表中.即

Then once the full html string of all the 'tr' nodes has been built and saved into a variable (lets use $newContent) I would like to append it to a table. i.e.

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

到目前为止，我已经弄清楚了如何遍历数据并像这样创建所需的"tr"节点:-

So far I have worked out how to iterate over the data and create the required 'tr' nodes as such:-

  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"节点以及交替使用奇数/偶数类很费力.

But I am struggling with iterating over the nested data and building the required 'td' nodes as well as alternating the odd/even classes.

答

我建议使用适当的DOM操作而不是创建字符串:

I'd suggest to use proper DOM manipulation instead of creating strings:

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

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

相关推荐