填充jQuery Mobile的ListView的本地JSON数据 [英] Populating jQuery Mobile ListView with local JSON data

问题描述

我试图填充本地JSON信息的JQM的ListView。但是，创建没有列表项。任何帮助将是AP preciated。这里是我的code：

JSON文件结构：

  [
{
名：测试
卡路里：1000
胖：100
蛋白质：100
碳水化合物：800
}，
{
名：TEST2
卡路里：10000
胖：343
蛋白质：3434
碳水化合物：4343
}
]
 

HTML：

 ＆LT; D​​IV数据角色=页面数据标题=搜索ID =searchPage＆GT;
      ＆LT; UL数据角色=列表视图数据插入=真正的ID =searchFood＆GT;
      ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

JS：

的（更新）的

 的$（document）。在（pageinit，#searchPage功能（）{
  $ .getJSON（../ JS / food.json功能（数据）{
        无功输出='';
        $。每个（数据，功能（指数值）{
         输出+ ='＆LT;立GT;＆LT; A HREF =＃＆GT;' + data.name +'＆LT; / A＆GT;＆LT; /李＆GT;';
        }）;
        $（'＃searchFood'）HTML（输出）.listview（刷新）;
  }）;
}）;
 

解决方案

首先，返回的 JSON 的阵列是错的，值（属性）应该用逗号分隔。

  VAR数据= [{
    名：测试，
        卡路里：1000，
        胖：100，
        蛋白质：100，
        碳水化合物：800
}，{
    名：TEST2
        卡路里：10000，
        胖：343
        蛋白质：3434，
        碳水化合物：4343，
}];
 

第二个错误，你应该阅读 $返回值对象。每个（）函数不是数据阵列。

  $。每个（数据，功能（指数值）{
  输出+ ='＆LT;立GT;＆LT; A HREF =＃＆GT;' + value.name +'＆LT; / A＆GT;＆LT; /李＆GT;';
}）;
 

jQueryMobile不仅提高一次，当它被加载页面。当新的数据被动态地添加到页面，jQueryMobile必须知道该数据的数据被增强的。

从的 JSON 的数组中提取数据后，追加他们，那么的刷新的列表视图来restyle新添加的元素。

  $（'＃searchFood'）HTML（输出）.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 File Structure:

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

(Updated)

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

解决方案

First of all, the return JSON array is wrong, values (properties) should be separated by commas.

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(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.

After extracting data from JSON array, append them then refresh listview to restyle newly added elements.

$('#searchFood').html(output).listview("refresh");

Demo

这篇关于填充jQuery Mobile的ListView的本地JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！