Displaying JSON data in HTML

Question

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.

[{
"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"
}]

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:

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. Sample:

 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:

$("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);
            }
        });
    });

I am confused by your question. You say that the PHP server outputs JSON but then your sample includes PHP to output HTML? — Jacob Mulquin
– Jacob Mulquin, Commented Jul 7, 2016 at 4:50
with html only is not posibile , you can use ajax and a loop to get the desired efect — madalinivascu
– madalinivascu, Commented Jul 7, 2016 at 4:50
Are you requesting data from 3rd party server, and use it in you page with PHP and HTML? — Parag Chaure
– Parag Chaure, Commented Jul 7, 2016 at 5:04
Sorry guys for the confuse, I have existing program(php), and now I am developing Hybrid app version(HTML, CSS, jquery). So I am just sending request to the server to get user's data etc. @mulquin — c.k
– c.k, Commented Jul 7, 2016 at 6:10
@parag yes I'm useng 3rd party server. I have API on the server for the app requests. I am just using HTML,CSS and jquery in client side which is the app. — c.k
– c.k, Commented Jul 7, 2016 at 6:15

Iceman · Accepted Answer · 2016-07-07 06:47:05Z

2

Server should supply json like:

<?php
$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>';
    $('#data_tbl').append(str);
  });
}
$("#fetch_btn").click(function() {
  //do ajax here and load data
  /*
  $.getJSON("get_data.php", function(result) {
    addData(result);
  });
  */
  //for demo calling the function with dummy data
  addData(dummy_data);
});

table,
th,
td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

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

<body>
  <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">
    <tr>
      <th>image of product</th>
      <th>name of product</th>
      <th>date</th>
      <th>profit</th>
      <th>investment</th>
    </tr>
  </table>
</body>

</html>

edited Jul 7, 2016 at 6:47

answered Jul 7, 2016 at 5:08

Iceman

6,1652 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

c.k Over a year ago

I got error on my code. data.forEach is not a function

Iceman Over a year ago

@c.k did you do the ajax. I haven't written the ajax there

Iceman Over a year ago

@c.k I have updated the answer with the ajax code also. Have a look at it.

c.k Over a year ago

I think I am wrong on my code. I do it like this: paste.ofcode.org/zpU4wCnF3GVmu4Set9hVid

Iceman Over a year ago

@c.k remove line 12, not required

|

Collectives™ on Stack Overflow

Displaying JSON data in HTML

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related