c.k c.k - 1 year ago 145
jQuery Question

Displaying JSON data in HTML

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.

This is my sample json from the server.

"product":"Shoes A",

"product":"Shoes B",

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, what is the best way displaying them. So that the data/items are all organize and well displayed with image upon page loaded.

Should be displayed automatically:

| image of product | name of product | date | profit | investment

What should my html page/css style setup? Or anything I should know more about this.

On my existing system using PHP. I just use a foreach of user product. Then a style every class where the data will be displaying.

foreach(products as product){
<div class="img"></div>
<div class="productname">echo product['product'];</div>

So i'm thinking if it possible to display it in html like what I did in PHP. Thanks for help.

Edit: My ajax call in client side:

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(JSON.stringify(data)); //to string

error: function(xhr, ajaxOptions, thrownError) {
alert(ajaxOptions + " " + thrownError);

Answer Source

Server should supply json like:

$data = array();
foreach(products as product){
    array_push($data, $product);
header('Content-Type: application/json');
echo json_encode($data);

You should fetch the data by ajax and then update the DOM:

var dummy_data = [{
    "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"

function addData(data) {
  data.forEach(function(row) {
    var str = '<tr>';
    str += '<td>' + row.id + '</td>';
    str += '<td>' + row.product + '</td>';
    str += '<td>' + row.date_open + '</td>';
    str += '<td>' + row.profit + '</td>';
    str += '<td>' + row.investment + '</td>';
    str += '</tr>';
$("#fetch_btn").click(function() {
  //do ajax here and load data
  $.getJSON("get_data.php", function(result) {
  //for demo calling the function with dummy data
td {
  border: 1px solid black;
<!DOCTYPE html>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <button id="fetch_btn">FETCH BY AJAX</button>
  <table id="data_tbl">
      <th>image of product</th>
      <th>name of product</th>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download