用本地JSON数据填充jQuery Mobile ListView

我试图用本地JSON信息填充JQM ListView。但是，不会创建任何列表项。任何帮助都将不胜感激。这是我的密码：

JSON文件结构：

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

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

HTML:

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

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

JS:

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

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

（更新）

$（document）.on（“pageinit”，“searchPage”，function（）{
$.getJSON（“../JS/food.json”），函数（数据）{
var输出=“”；
$.each（数据、函数（索引、值）{
输出+='
'；
});
$（'#searchFood'）.html（输出）.listview（“刷新”）；
});
});

首先，返回的JSON数组是错误的，值（属性）应该用逗号分隔

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

第二个错误是，您应该读取

$返回的
值
对象。each（）

函数不是

数据

数组

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

---

$（'#searchFood'）.html（输出）.listview（“刷新”）谢谢Omar-但是仍然没有出现带有这些更改的列表项：/I我已经更新了帖子上的JS以反映您的建议。