title: Displaying JSON data in HTML
body: <p>I am developing a Hybrid App using intel XDK. On the app I am using ajax request to my PHP server. The server will respond with json data.</p>
  
  <p>This is my sample json from the server. </p>
  
  <pre><code>[{
  "id":"11",
  "user_id":"8000",
  "product":"Shoes A",
  "quantity":"1",
  "date_open":"2015-01-04",
  "paid":"1",
  "harvested":"",
  "reinvest":null,
  "profit":null,
  "investment":"3000"
  },
  
  {
  "id":"12",
  "user_id":"8000",
  "product":"Shoes B",
  "quantity":"1",
  "date_open":"2015-03-01",
  "paid":"1",
  "harvested":"",
  "reinvest":null,
  "profit":null,
  "investment":"1500"
  }]
  </code></pre>
  
  <p>The number of product per user here is different, some have no product, some have 1, 2...10 etc. products. So depending on how many the product of a user, <strong>what is the best way displaying them</strong>. So that the data/items are all organize and well displayed with image upon page loaded.</p>
  
  <p>Should be displayed automatically:</p>
  
  <p><strong>| image of product | name of product | date | profit | investment</strong> </p>
  
  <p>What should my html page/css style setup? Or anything I should know more about this.</p>
  
  <p>On my existing system using PHP. I just use a <strong>foreach</strong> of user product. Then a style every class where the data will be displaying.
  Sample:</p>
  
  <pre><code> foreach(products as product){
            ?&gt;
            &lt;div class="img"&gt;&lt;/div&gt;
            &lt;div class="productname"&gt;echo product['product'];&lt;/div&gt;
      &lt;?
      }
  </code></pre>
  
  <p>So i'm thinking if it possible to display it in html like what I did in PHP. Thanks for help.</p>
  
  <p>Edit: My ajax call in client side:</p>
  
  <pre><code>$("button").click(function(){
          $.ajax({
              type: 'POST',
              url: "http://www.sample.com/app/user-data.php",
              crossDomain: true,
              dataType: 'json',
              data: { user_token: user_token },
              success: function(data, status, jqXHR) {
                  //console.log(data); //`this is displaying only as object why?`
                  //console.log(status);
                  console.log(JSON.stringify(data)); //to string
              },
  
              error: function(xhr, ajaxOptions, thrownError) {
                  alert(ajaxOptions + " " + thrownError);
              }
          });
      });
  </code></pre>