JQuery Mobile爲ListView解析JSON

這個問題已經被問及很多問題，並且在過去的3天中經歷了許多不同的'解決方案'，我都無法工作。JQuery Mobile爲ListView解析JSON

我有一個巨大的JSON文件，一些150k條目，我想在JQuery Mobile中查看爲ListVIew。（我將使用過濾器實際使用數據）

我想出的最好的是這個

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="css/jqm-docs.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 




</head> 

<body> 
    <div data-role="page"> 
    <div data-role="content"> 
     <div id="output"> 
      <ul data-role="listview" data-inset="true" data-filter="true"> 

      </ul> 
     </div> 
    </div> 
</div> 


<script type="text/javascript"> 
     //simulating the JSON coming from the server 
var json = '["City1","City2","City3"]'; 
//jQuery getJSON will do this step 
var data = $.parseJSON(json); 

//and this is your code 
$.each(data, function (index, value) { 
     $('#output').children('ul').append('<p>'+value+'</p>').listview('refresh'); 
}); 

</script> 

</body> 
</html>

如果我刪除.listview（「刷新」），則所有三個JSON條目列在同一個ListView字段中。我顯然希望他們分開。

任何人都可以建議如何做到這一點？

與感謝

添

來源

2012-06-10 tjmgis

爲了使用$.parseJSON首先你需要有適當的JSON string format

，所以我想你的變量

var json = '["City1","City2","City3"]';

應該更像：

var json = '{"city":"City1"},{"city":"City2"},{"city":"City2"}';

然後前要將其轉換爲JSON，您寧願先將其拆分爲

var jsonSplit = json.split(',');

，並轉換爲JSON每一個單獨部分的陣列

var data = new Array(), i; 
for(i in jsonSplit){ 
if(jsonSplit[i].length){ //remove last empty element after .split() 
    data[i] = $.parseJSON(jsonSplit[i]); 
} 
}

然後在你可以操縱data作爲一個JavaScript對象

來源

2012-06-10 22:56:39 JFK

你缺少li元素。

$.each(data, function (index, value) { 
     $('#output').children('ul').append('<li><p>'+value+'</p></li>').listview('refresh'); 
});

來源

2012-06-10 21:49:59 micadelli

$.each(data, function (index, value) { 
     $('#output').children('ul').append('<li><p>'+value+'</p></li>').listview('refresh'); 
});

刪除根據你是什麼列表視圖（刷新）在這裏做，你不需要每次刷新。如果你是通過說php等動態添加它的話......你需要在最後刷新。

$.each(data, function (index, value) { 
     $('#output').children('ul').append('<li><p>'+value+'</p></li>'); 
});

來源

2012-07-16 15:05:21

JQuery Mobile爲ListView解析JSON

回答

相關問題