How to access nested data with jQuery templates

Question

I am trying to get my head arround the jQuery templates plugin.

My JSON is formatted like this:-

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

I am trying to use jQuery templates to take this JSON array and apply a tr node template for each object in this within "aaData" in this array as well as render seperate 'td' nodes for the individual pieces of data.

However all of the examples I have seen have JSON formatted with unique names for each piece of data within an object i.e. "name", "value" etc. I am unable to re-format the JSON source so I need to access the nested data via it's index.

My template and code is currently like this:-

$.ajax({
    "dataType": 'json',
    "url": '/wp-content/hovercard.php',
    "data": 'user=' + $artistid + '&start=' + $start + '&finish=' + $finish + '&order=' + $orderValue + '&orderColumn=' + $columnValue,
    "success": function(data, textStatus, jqXHR) {

        var domain = data.domain;
        var array = data.aaData;
        var $table = $('#favourites-hovercard-table-'  + $artistid );

        var markup = ''
                         + ''
                         + '${0}
'
                         + '${4}
3'
                         + ''
                         + '${6}'
                    + '';

        $.template( "favouritesTemplate", markup );
        $.tmpl( "favouritesTemplate", array ).appendTo($table);



        }

});

As you can see above, within my template I am trying to use ${1}, ${2}, ${3} etc.. to access the index of the data within the object since it is unnamed.

Clearly this is the wrong approach and I must be missing something vital here.

How do I access this data? within my template in order to append more rows to my table on demand.

Also, I would like to be able to alternate the class of the tr node between 'odd' and 'even'. Is this at all possible with jQuery templates?

Many thanks.

EDIT:

I have managed to conditionally modify the server side script so this for this instance it will output the JSON data complete with object names like this:-

     {
    "sEcho":1,
    "total":"1710",
    "aaData":[
        [
            "song_name": "Help",
            "song_file": "http:\/\/www.mysite.com\/wp-content\/uploads\/2011\/09\/dt_intfc4e732d1f1276d_4e76fab1e95bd.mp3?King_of_Spain_Entropy_02_Animals_Part_1.mp3",
            "songsID": "1784",
            "user": "3",
            "rating": 0,
            "ratings_count": null,
            "uploaded_time" "0000-00-00 00:00:00"
        ],
}

And have now updated my template as follows:-

var markup = ''
                + ''
                + '${song_name}
'
                + '${rating}
${user}'
                + ''
                + '${uploaded_time}'
            + '';

But it is still not rendering the data in the tr/td nodes that it creates. According to firebug all the data is being tied to the initial 'tr' node.

I'm unsure where I am going wrong?

Richard · Accepted Answer

I don't think you can do this. All the variables need to be named. Have a look at this page:

http://api.jquery.com/jQuery.template/

Where are you getting the JSON from?

How to access nested data with jQuery templates

Answers (1)

Related Questions