방법이 중첩 된 객체 JSON 배열을 반복하고 jQuery를

Question

내가이 형식으로 JSON 데이터를 잡하고있는 HTML 문자열을 구축 : -

{ 
"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({ 
    "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. 

     } 

    }); 

'TR'노드의 목록을 작성한 다음 테이블에 삽입하려면이 JSON 배열 내의 중첩 된 객체를 어떻게 순환합니까? 내가 위에서 내 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

내가 만드는 문자열 대신 적절한 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 2

Jquery Template http://api.jquery.com/jQuery.template/을 사용하면 테이블의 데이터를 매우 쉽게 업데이트 할 수 있습니다.

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 또는 다른 플러그인을 사용하여 conssider 할 수 있습니다