title: Mustache , iterating over JSON objects
body: <p>I have a JSON array of objects, and am trying to work out how to display them in Mustache.js. The array can be variable in length and content.</p>
  
  <p>Example:</p>
  
  <pre><code>[ Object { id="1219", 0="1219", title="Lovely Book ", url= "myurl} , Object { id ="1220" , 0="1220 , title "Lovely Book2" , url="myurl2"}]
  </code></pre>
  
  <p>Ive tried:</p>
  
  <pre><code>        $.getJSON('http://myjsonurl?type=json', function(data) {
          var template = $('#personTpl').html();
          var html = Mustache.to_html(template, data);
          $('#test').html(html);
  </code></pre>
  
  <p>and the template:</p>
  
  <pre><code> &lt;script id="personTpl" type="text/template"&gt;
  TITLE: {{#data}} {{title}} IMAGE: {{image}}
  &lt;p&gt;LINK: &lt;a href="{{blogURL}}"&gt;{{type}}&lt;/a&gt;&lt;/p&gt;  {{/data}} 
  &lt;/script&gt;
  </code></pre>
  
  <p>but that doesn't display anything. </p>
  
  <p>I've tried putting the JSON into an array, and then accessing it directly using  <code>products[1]</code> something like this:</p>
  
  <pre><code>$.getJSON("http://myjsonurl?type=json", function(json) 
  {
      var products = [];
  
      $.each(json, function(i, product)
      {           
              var product =
              {           
                  Title:product.title,
                  Type:product.type,
                  Image:product.image             
              };
  
              products.push(product);
          ;       
      });     
  
      var template = "&lt;h1&gt;Title: {{ Title }}&lt;/h1&gt; Type: {{ Type }} Image : {{ Image }}";
  
  
      var html = Mustache.to_html(template, products[1]);
      $('#json').html(html);                      
  
  }); 
  </code></pre>
  
  <p>which will display one record fine, but how can I iterate over them and display all ?</p>