如何通过这个嵌套的对象JSON数组循环，并与jQuery

-1

我recieving这种格式的JSON数据建立一个HTML字符串： -如何通过这个嵌套的对象JSON数组循环，并与jQuery

{ 
"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'节点以及交替奇数/偶数类。

来源

2011-12-19 gordyr

到底是什么问题了吗？如何遍历对象属性？或数组元素？或者访问它们？所有这些事情已经在这里得到解答。 – 2011-12-19 14:33:05

对不起，我应该更清楚。我可以迭代每个对象，并将所有包含的数据逗号分隔到'tr'节点中。但我不能确定如何进一步打破下来和单独的每个“TR”节点的内部数据转换成单独的“TD的”。我正在努力正确构建html字符串。 – gordyr 2011-12-19 14:36:44

'aaData'是一个数组。迭代这个数组，为每个进入一个新的'td'元素，并将其附加到新创建的'tr'元素。 – 2011-12-19 14:42:36

我建议你使用正确的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) 
});

来源

2011-12-19 14:53:51

更好的使用jQuery模板http://api.jquery.com/jQuery.template/这是很容易在表更新数据。

来源

2011-12-19 14:32:12 manny

这看起来像一个不错的选择，可能比我自己写的任何东西都更有效率。我会仔细研究一下，谢谢。 – gordyr 2011-12-19 14:38:22

好，你可以做这样的事情

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或其他一些插件conssider

来源

2011-12-19 14:50:03 mcgrailm

如何通过这个嵌套的对象JSON数组循环，并与jQuery

回答

相关问题