我正在尝试使用本地 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");
});
});
最佳答案
首先,返回的JSON数组是错误的,值(属性)应该用逗号分隔。
var data = [{
"name": "test",
"calories": "1000",
"fat": "100",
"protein": "100",
"carbohydrates": "800",
}, {
"name": "test2",
"calories": "10000",
"fat": "343",
"protein": "3434",
"carbohydrates": "4343",
}];
第二个错误,您应该读取 $.each()
函数返回的 value
对象,而不是 data
数组。
$.each(data, function (index, value) {
output += '<li><a href="#">' + value.name + '</a></li>';
});
jQueryMobile 只在页面加载时增强一次页面。当新数据动态添加到页面时,jQueryMobile 必须知道要增强的数据的数据。
从 JSON 数组中提取数据后,附加它们,然后刷新 ListView 以重新设置新添加元素的样式。
$('#searchFood').html(output).listview("refresh");
关于json - 使用本地 JSON 数据填充 jQuery Mobile ListView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21881830/