Take a JSON response and place it into html tables

Question

EDIT

Using a program called Postman which I have used to get the first part of the code below, the $curl bit:

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.extensopro.com/machines/list? customerid=????&apikey=??????????????????????????????????????",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"authorization: AWS4-HMAC-SHA256 Credential=/20170322/us-east-1/execute-api/aws4_request, SignedHeaders=content-type;host;x-amz-date, Signature=38e3277546829fd58be65805df8832c51b6a865c9df7279e80c408bd3116587d",
 "cache-control: no-cache",
 "content-type: application/x-www-form-urlencoded",
 "postman-token: 4aafd978-bda3-88ef-0db2-326b91880549",
 "x-amz-date: 20170322T095504Z"
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
  <table border="1" cellpadding="8" cellspacing="0" id="cteTable">
    <tr>
       <th>ID</th>
       <th>MANUFACTURER</th>
       <th>YEAR</th>
    </tr>
</table>
<script type="text/javascript">

$(document).ready(function () {
$.getJSON(url,
function (json) {
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].ID + "</td>");
        tr.append("<td>" + json[i].MANUFACTURER + "</td>");
        tr.append("<td>" + json[i].YEAR + "</td>");
       $('table').append(tr);
    }
   });
});
$('#cteTable').append(tr)
</script>
</body>
</body>
</html>

I know this is not right but I don't have any knowledge of coding, the code above is in part from this post and also from this post

The response from postman shows about 40 headings, do I have to have everyone in the code above for this to work or just the ones I want?

Below is the output from:

if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}


{"DATA":[{"UNITS":8,"CONDITION":{"NAME":"","VALUE":""},"UNITTYPE":"Stations","IMPRESSIONS":205000000,"MANUFACTURER":"Heidelberg","MODEL":"SM 102","HASREFERENCE":true,"HASSIZE":1,"YEAR":1994,"REFERENCE":"8187","URL":"/Machines/Heidelberg/44715-50082/Heidelberg-SM-102-8.html","SIZE":{"HEIGHT":1020,"HASWIDTH":1,"WIDTH":720,"NAME":"720x","HASHEIGHT":1},"HASIMAGE":1,"STATUSES":[{"NAME":"In Production","ID":8}],"CATEGORY":"Press","IMAGE":{"ONERROR":"failover(this, { imagegeneratorid: '219610_60', onerror1 : 'https://s3-eu-west-1.amazonaws.com/presscity-thumbnails/18/60/x60_heidelberg-sm102-219610.jpg', onerror2: 'http://pdf.presscity.com/localStorage_s3.cfm?orgFile=18_6535fb358939919cb4a37ac9f013b895.jpg&filename=x60_Heidelberg-SM102-219610.jpg&size=60&host=api.extensopro.com&nPictureNo=219610&nMachineNo=44715'});","ID":219610,"SRC":"http://cdn.presscity.com/18/60/x60_heidelberg-sm102-219610.jpg"},"SPECIFICATIONWEBSITE":"","SUBCATEGORY":"Sheetfed","NAME":"Heidelberg SM 102 8","ID":44715,"AVAILABLILITY":"","HASYEAR":1,"HASPRICE":0,"SPECIFICATION":"Straight Machine No Perfecting\r\nStream Feeder, CPC 1-03, CP Tronic, Autoplate, Alcolor damping, Auto Ink roller wash, \r\nAuto Blanket Wash, Non-stop feeder & delivery, Preset Feeder, Diagonal Register, Powder Spray, \r\n"}],"INFO":{"RECORDCOUNT":1}}

So I know the output from the server is working, how do I now get to parse this output and place it into the table on my page and as asked above, do I have to use all the field that are output or just the ones I want?

Please post the response and the response you are expecting. If you see any error on your side, please share it as well. — Ka Hou Ieong, Mar 23 '17 at 18:34
Have added the $response I get from the data server. How do I parse and get into tables? — Tony Hanks, Mar 23 '17 at 23:50

score 0 · Answer 1 · answered Mar 24 '17 at 00:06

The HTML page and the Javascript that you're using to populate the table from page body need to be part of the same HTML page. It's not clear from what you posted if that's the case. Try replacing your <script>...</script> code in your PHP file with what I have below.

 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
 </head>
    <body>
      <table id="cteTable">
        <tr>
           <th>Account Name</th>
           <th>Advisor</th>
           <th>Links</th>
        </tr>
  </table>
<script type="text/javascript">

    $(document).ready(function () {
$.getJSON(url,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].User_Name + "</td>");
            tr.append("<td>" + json[i].score + "</td>");
            tr.append("<td>" + json[i].team + "</td>");
           $('table').append(tr);
        }
       });
    });
    $('#cteTable').append(tr)
</script>
</body>
</html>

score 0 · Answer 2 · answered Mar 24 '17 at 02:04

0

try this one jquery datatables https://datatables.net/

answered Mar 24 '17 at 02:04

ampedo

257
2
17

Take a JSON response and place it into html tables

2 Answers2