使用本地JSON数据填充jQuery Mobile ListView

Question

我试图用本地JSON信息填充JQM ListView.但是,不会创建任何列表项.任何帮助,将不胜感激.这是我的代码:

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");

演示