Populating jQuery Mobile ListView with local JSON data

Question

I am trying to populate a JQM ListView with a local JSON information. However, no list items are created. Any help would be appreciated. Here is my code:

JSON File Structure:

[
{
"name" : "test"
"calories" : "1000"
"fat" : "100"
"protein" : "100"
"carbohydrates" : "800"
},
{
"name" : "test2"
"calories" : "10000"
"fat" : "343"
"protein" : "3434"
"carbohydrates" : "4343"
}
]

HTML:

<div data-role="page" data-title="Search" id="searchPage">
      <ul data-role="listview" data-inset="true" id="searchFood">
      </ul>
</div>

JS:

(Updated)

$(document).on("pageinit", "#searchPage", function(){
  $.getJSON("../JS/food.json", function(data){
        var output = '';
        $.each(data, function(index, value){
         output += '<li><a href="#">' +data.name+ '</a></li>';
        });
        $('#searchFood').html(output).listview("refresh");
  });
});

Thanks Omar - but still no list items appearing with those changes:/ I have updated the JS on the post to reflect your suggestions. — Tomuke
– Tomuke, Commented Feb 19, 2014 at 13:30

Varun Nath · Accepted Answer · 2014-02-21 19:01:03Z

6

First of all, the return JSON array is wrong, values (properties) should be separated by commas.

var data = [{
    "name": "test",
        "calories": "1000",
        "fat": "100",
        "protein": "100",
        "carbohydrates": "800",
}, {
    "name": "test2",
        "calories": "10000",
        "fat": "343",
        "protein": "3434",
        "carbohydrates": "4343",
}];

Second mistake, you should read value object returned by $.each() function not data array.

$.each(data, function (index, value) {
  output += '<li><a href="#">' + value.name + '</a></li>';
});

jQueryMobile only enhances the page once when it is loaded. When new data is added dynamically to the page, jQueryMobile must be made aware of the data for the data to be enhanced.

After extracting data from JSON array, append them then refresh listview to restyle newly added elements.

$('#searchFood').html(output).listview("refresh");

Demo

edited Feb 21, 2014 at 19:01

Varun Nath

5,6623 gold badges25 silver badges39 bronze badges

answered Feb 19, 2014 at 13:34

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Populating jQuery Mobile ListView with local JSON data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related