使用本地 JSON 数据填充 jQuery Mobile ListView [英] Populating jQuery Mobile ListView with local JSON data
问题描述
我正在尝试使用本地 JSON 信息填充 JQM ListView.但是，不会创建任何列表项.任何帮助，将不胜感激.这是我的代码:
I am trying to populate a JQM ListView with a local JSON information. However, no list items are created. Any help would be appreciated. Here is my code:
JSON 文件结构:
HTML:
HTML:<div data-role="page" data-title="Search" id="searchPage">
<ul data-role="listview" data-inset="true" id="searchFood">
</ul>
</div>
JS:
(更新)
推荐答案
首先，返回的JSON数组是错误的，值(属性)应该用逗号隔开.
var data = [{
"name": "test",
"calories": "1000",
"fat": "100",
"protein": "100",
"carbohydrates": "800",
}, {
"name": "test2",
"calories": "10000",
"fat": "343",
"protein": "3434",
"carbohydrates": "4343",
}];
Second mistake, you should read value object returned by $.each() function not data array.第二个错误，你应该读取$.each()函数返回的value对象，而不是data数组.
$.each(data, function (index, value) {
output += '<li><a href="#">' + value.name + '</a></li>';
});
jQueryMobile only enhances the page once when it is loaded. When new data is added dynamically to the page, jQueryMobile must be made aware of the data for the data to be enhanced. jQueryMobile 仅在页面加载时增强一次页面.当新数据动态添加到页面时，jQueryMobile 必须知道要增强的数据的数据.
After extracting data from JSON array, append them then refresh listview to restyle newly added elements.
从 JSON 数组中提取数据后，附加它们然后 refresh listview 以重新设置新添加的元素的样式.
$('#searchFood').html(output).listview("refresh");
<块引用>
这篇关于使用本地 JSON 数据填充 jQuery Mobile ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
