title: looping through JSON array in a jQuery list
body: <p>I have this JSON array</p>
  
  <pre><code>// Json array
  var productList = {"products": [
      {"description": "product 1", "price": "9.99"},
      {"description": "product 2", "price": "9.99"},
      {"description": "product 3", "price": "9.99"}
  ]
  };
  </code></pre>
  
  <p>I want it to loop through my list view but have no idea how to do this
  all I can do so far is list one item at a time. Also, I can only list the product and not the product = the price. The jQuery forum inst helping... thanks !!</p>
  
  <p>Here's the rest of the code</p>
  
  <pre><code>function loadList() {
  //  var list = document.getElementById('productList');
      var list = $("#productList").listview();
  
      var listItem = document.createElement('li');
      listItem.setAttribute('id', 'listitem');
  
      listItem.innerHTML = productList.products[0].description;
  
      $(list).append(listItem);
      $(list).listview("refresh");
  </code></pre>
  
  <p>and the HTML file</p>
  
  <pre><code>&lt;html xmlns:f="http://www.lipso.com/f" xmlns:l="http://www.lipso.com/v2/lml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  &lt;head&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
      &amp;meta;
      &lt;script src="@=site.cfg.resources.url@/test.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="loadList()"&gt;
  &lt;div data-role="page"&gt;
      &lt;div data-role="header" id="header"&gt;
          &lt;h1&gt;Dynamic Product List&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content" id="content"&gt;
          &lt;ul id="productList" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>