Populating jQuery Mobile ListView with local JSON data -


I am trying to populate a JQM list view with a local JSON notification. However, any help items will not be appreciated if any inventory items are not created. Here is my code:

JSON file structure: 

  [{"name": "test" "calories": "1000" " Fat ":" 100 "" protein ":" 100 "" carbohydrate ":" 800 "}, {" name ":" test2 "" calories ":" 10000 "" fat ":" 343 "" protein ":" 3434 "Carbohydrate": "4343"}

HTML: 

  & lt; div data-role = "page" data -title = "search" id = "search page" & gt; & lt; ul data-roll = "listview" data-inset = "true" id = "searchfood">  & gt; Lt; / div>

JS:

(Updated) 

  $ (document) .on ("pageinit", "#searchPage", function () {$ .getJSON ("../JS / food.json", function (data) {var output = ''; $ .each (data, function (index, value) {output + = '
  •  gt; & lt; a href = "#" & gt;' + data.name + '& lt; / a & gt;
    • Div>

    First, the return JSON array is incorrect; value (assets) should be separated with commas . "100", "100", "Carbohydrate": "100", "Protein": "1000", "Fat": "Test", "Calories": "1000", "Fat": 

     : "3434", "protein": "3434", "carbohydrates": "4343",} "100", "fat": "10000", "fat": "800",}, {"name": "test2", "calorie" ];

    The second mistake, you value the object to be $. Should be read back by. Each () function not data array. 

      $ Each of the data, functions (index, value) {output + = '
  •  gt; & lt; a href = "#" & gt;' + value.name + '& lt; / a & gt; Lt; / li & gt; ';});

    • jQueryMobile only loads when it loads. When new data is dynamically added to the page, jQuery mobile should be made aware of the data to expand the data. After removing the data from the JSON array, add them to the Refresh list to see the elements added to the 

      $ ('# SearchFood'). Html (output) .listview ("Refresh");


    Comments

    Post a Comment