2012-06-10 3 views
0

Cette question a été posée beaucoup et a passé les 3 derniers jours à passer par un certain nombre de «solutions» différentes, dont je ne peux pas travailler.JQuery Mobile Parse JSON pour ListView

J'ai un énorme fichier JSON, quelques 150k entrées, que je veux voir en tant que ListVIew dans JQuery Mobile. (Je vais utiliser le filtre à utiliser effectivement les données)

Le meilleur que je suis venu avec est ce

<!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> 

Si je supprime la .listview (« refresh »), puis les trois entrées de JSON sont répertorié dans le même champ ListView. Je les veux évidemment séparés.

Quelqu'un peut-il vous conseiller sur la façon de faire cela?

Avec grâce

Tim

Répondre

2

Pour utiliser $.parseJSON d'abord vous devez avoir le bon JSON string format

donc je suppose que votre variable

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

devrait ressembler davantage:

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

alors avant pour le convertir en JSON, vous préférez le diviser en premier

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

et convertir en JSON chaque partie separée dans un tableau

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

alors vous pouvez manipuler data comme un objet javascript

1

Il vous manque li éléments.

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

Retirer Listview (rafraîchissement) en fonction de ce que vous êtes Ce faisant, vous n'avez pas besoin d'un rafraîchissement à chaque fois. Si vous l'ajoutez dynamiquement via say php ... Vous aurez besoin de rafraîchir à la fin.

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