Question

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"
    ]
}

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.

         }

  });

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?

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.

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

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

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

Answer 1

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