How to loop through this nested object JSON array and build an html string with jQuery

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.

What exactly is your problem? How to iterate over object properties? Or array elements? Or accessing them? All of these things have already been answered here. — Felix Kling
– Felix Kling, Commented Dec 19, 2011 at 14:33
Sorry I should have been more clear. I am able to iterate over each object and insert all of the contained data comma seperated into 'tr' nodes. But I am unsure how to further break that down and seperate the internal data of each 'tr' node into the seperate "td's". I'm struggling with building the html string correctly. — gordyr
– gordyr, Commented Dec 19, 2011 at 14:36
aaData is an array. Iterate over the array, create a new td element for each entry and append it to the newly create tr element. — Felix Kling
– Felix Kling, Commented Dec 19, 2011 at 14:42
Thanks, but I am aware of this. It's the implementation I am struggling with. I have updated my question above with more detail. — gordyr
– gordyr, Commented Dec 19, 2011 at 14:46

Felix Kling · Accepted Answer · 2011-12-19 16:17:54Z

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

edited Dec 19, 2011 at 16:17

answered Dec 19, 2011 at 14:53

Felix Kling

819k181 gold badges1.1k silver badges1.2k bronze badges

Add a comment |

manny · Accepted Answer · 2011-12-19 14:32:12Z

1

Better use Jquery Template http://api.jquery.com/jQuery.template/ it is very easy to update your data in table.

answered Dec 19, 2011 at 14:32

manny

1,9582 gold badges15 silver badges31 bronze badges

This looks like a great option and likely more efficient than anything I could write myself. I will take a look into it, thank you.

gordyr
– gordyr

12/19/2011 14:38:22
Commented Dec 19, 2011 at 14:38

Add a comment |

mcgrailm · Accepted Answer · 2011-12-19 14:50:03Z

well you could do something like this

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

but you may want to conssider using jGrid or some other plugin

Collectives™ on Stack Overflow

How to loop through this nested object JSON array and build an html string with jQuery

3 Answers 3

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related