title: Render each Objects in an array in HTML from JavaScript
body: <p>I have a JavaScript array of objects taken from a JSON file. Each object in the array represents a product. The following code shows the JavaScript. The <code>console.log</code> displays each element in the console, however the innerHTML only renders the last as this is the last value to be rendered. </p>
  
  <pre><code>/* global $ */
  var output = document.getElementById('output');
  var products = [];
  
  $.getJSON('/products', function(data){
      output.innerHTML = data
  
  
      for(var keys in data){
          console.log(data[keys]);
          products.push(data[keys]);
          output.innerHTML = data[keys].NAME;
      }
      // output.innerHTML = products;
      //console.log(products)
  
  });
  </code></pre>
  
  <p>I want each product to be rendered in it's own output div. How would I display each element in the HTML instead of just the last?</p>