title: JQuery Mobile Parse JSON for ListView
body: <p>This question has been asked lots and have spent the last 3 days going through a number of different 'solutions', none of which I can get to work.</p>
  
  <p>I have a huge JSON file, some 150k entries, that I want to view as a ListVIew in JQuery Mobile. (I will be using the Filter to actually use the data)</p>
  
  <p>The best I have come up with is this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="css/jqm-docs.css" /&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div data-role="page"&gt;
      &lt;div data-role="content"&gt;
          &lt;div id="output"&gt;
              &lt;ul data-role="listview" data-inset="true" data-filter="true"&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
          //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('&lt;p&gt;'+value+'&lt;/p&gt;').listview('refresh');
  });
  
  &lt;/script&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I remove the .listview('refresh') then all three JSON entries are listed in the same ListView field. I obviously want them seperated.</p>
  
  <p>Can anyone advise on how to do this?</p>
  
  <p>With thanks</p>
  
  <p>Tim</p>