Question

I am trying to push JSON into a div.

data[i].restaurant.name ideally goes in the div as text.
data[i].restaurant.ambienceRating ideally goes in the div as .data(“ambienceRating”)

That’s what im trying to accomplish anyhow.

$.getJSON('data.json', function(data) {
        console.log(data[0].restaurant.ambienceRating);
        var output="<ul>";
        for (var i=0; i < data.length; i++) {
            output+="<li id=" + i + ">" + data[i].restaurant.name + "</li>";
        }

        output+="</ul>";
        document.getElementById("films").innerHTML=output;

});

How and where should I push the ambienceRating to be able to retrieve it later?
I tried putting $( this ).data("ambienceRating", data[i].restaurant.ambienceRating) into the for-loop but it comes out as a [Object object] string.

EDIT:
Logging ( this ) inside the for-loop returns the data.json object

data[i].restaurant.ambienceRating is “10” (a string, NaN)

http://jsfiddle.net/techii/JtQyr/

Answer 1

Add the data to the li by adding a data attribute to the li.

$.getJSON('data.json', function(data) {
        console.log(data[0].restaurant.ambienceRating);
        var output="<ul>";
        for (var i=0; i < data.length; i++) {
            output+="<li data-ambience-rating='" + data[i].restaurant.ambienceRating + "' id='" + i + "'>" + data[i].restaurant.name + "</li>";
        }

        output+="</ul>";
        document.getElementById("films").innerHTML=output;

});

Now you can access it later with console.log( $(oneli).data("ambienceRating") )