使用本地JSON數據填充jQuery Mobile ListView

我正在嘗試使用本地JSON信息填充JQM ListView。但是，不會創建任何列表項目。任何幫助，將不勝感激。這裏是我的代碼：使用本地JSON數據填充jQuery Mobile 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"); 
    }); 
});

來源

2014-02-19 Tomuke

'$（ '＃searchFood'）HTML（輸出）.listview（「刷新」）;' – Omar

感謝奧馬爾 - 但仍然沒有列表項與出現這些變化：/我已更新該帖子上的JS以反映您的建議。 – Tomuke

首先，返回JSON陣列是錯誤的，值（屬性）應該由逗號分隔。

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

第二個錯誤，你應該閱讀$.each()功能不data數組返回value對象。

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

jQueryMobile在加載時只會增強頁面一次。當新的數據動態添加到頁面時，必須讓jQueryMobile知道要增強的數據的數據。

從JSON陣列中提取的數據之後，追加他們然後刷新列表視圖再整新添加的元素。。

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

Demo

來源

2014-02-19 13:34:38 Omar

使用本地JSON數據填充jQuery Mobile ListView

回答

相關問題