Befüllen von jQuery Mobile ListView mit lokalen JSON-Daten

Ich versuche, eine JQM-ListView mit lokalen JSON-Informationen zu füllen. Es werden jedoch keine Listenelemente erstellt. Jede Hilfe wäre dankbar. Hier ist mein Code:

JSON-Dateistruktur:

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

(Aktualisiert)

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

Antworten auf die Frage(1)

Ihre Antwort auf die Frage