Заполнение jQuery Mobile ListView с локальными данными JSON

Question

Я пытаюсь заполнить JQM ListView локальной информацией JSON. Однако элементы списка не создаются. Любая помощь будет оценена по достоинству. Вот мой код:

JSON Структура файла:

[ 
{ 
"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:

(Обновлено)

$(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"); 
    }); 
}); 

Answer 1

Прежде всего, возвращение JSON массив является неправильным, значения (свойства) должны быть разделены запятыми.

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

Вторая ошибка, вы должны прочитать value объект, возвращаемый функцией $.each() не data массива.

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

jQueryMobile только увеличивает страницу один раз при ее загрузке. Когда новые данные динамически добавляются на страницу, jQueryMobile должен быть ознакомлен с данными для данных, которые необходимо улучшить.

После извлечения данных из JSON массива, добавьте их тогда обновить ListView к перестиль вновь добавленные элементы. .

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

Demo