JSON from url to PHP table

Question

I am getting the data from the below url

https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME+Products&pageSize=500&pageNumber=1&_=1537972316703

and I want to display a html table on my page, something like the image below HTML Table

Can anyone help me to get the desired table with the help of javascript or php.

UPDATED: Below is the code I am trying, not sure

<script>
var url = "https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME+Products&pageSize=500&pageNumber=1&_=1537972316703";
 
// send AJAX request
var req = new XMLHttpRequest();
req.onload = function() {
	generateHTMLTable(req.response);
}
req.open("GET",url);
req.send();
 
// generate HTML string and insert it
function generateHTMLTable(data) {
	var str = "";
	for(var row=0; row<data.length; row++) {
		str += "<tr>"; // open HTML row
		for(var col=0; col<data[row].length; col++)
			str += "<td>" + data[row][col].name + "</td>";
		str += "</tr>"; // close HTML row
	}
	
	// assumes the table element has id "table":
	// <table id="table"></table>
	var table = document.getElementById("table");
	table.innerHTML = str;
}
</script>

Answer 1

Using PHP (you could still use AJAX to retrieve the data if you want, but your endpoint(url) does not allow for cross-origin requests - you could use a CORS proxy like e.g. https://cors.io):

<?php
$url = "https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME+Products&pageSize=500&pageNumber=1&_=1537972316703";
$json = file_get_contents($url);
$arr = json_decode($json);

echo '<table>';
echo '<th>exchange</th><th>sector</th><th>name</th><th>product family</th><th>start period</th><th>end period</th><th>maintenance rate</th><th>vol scan maintenance rate</th>';
foreach($arr->marginRates as $key => $value) {
    echo '<tr style="border: 1px solid black;">';
    echo '<td style="border: 1px solid black;">' . $value->exchange . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->sector . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->name . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->productFamily . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->startPeriod . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->endPeriod . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->maintenanceRate . '</td>';
    echo '<td style="border: 1px solid black;">' . $value->volScanMaintenanceRate . '</td>';
    echo '</tr>';
}
echo '</table>';

You should use your own styling rules(CSS sheet), I guess, I just copy-pasted a black border for this example, which admittedly is not very neat.

Answer 2

try this, may it can help you

on html

getdata.php

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://www.cmegroup.com/CmeWS/mvc/Margins/OUTRIGHT?1=1&sortField=exchange&sortAsc=true&exchange=NYM&sector=DME%20Products&pageSize=500&pageNumber=1&_=1537972316703",
  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(
    "cache-control: no-cache"
  ),
));

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

curl_close($curl);

if ($err) {
  $status = false;
  $data = "cURL Error #:" . $err;
} else {
  $status = true;
  $data = $response;
}
$json = array('status'=>$status, 'data'=>$data);
header('Content-Type: application/json');
echo json_encode($json, JSON_PRETTY_PRINT);

?>

on html using jquery lib javascript

<table>
  <thead>
    <tr>
      <th>exchange</th>
      <th>sector</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>
<script>
$.getJSON(getdata.php, function(record){
  if (record.status!=false) {
    var tbody = "<tr><td colspan=3>"+record.data+"</td></tr>";
      $("#tbody").html(tbody);
  }else{
    for (var i = 0; i < record.data.marginRates.length; i++) {
      var tbody = "<tr><td>"+record.data.marginRates[i].exchange+"</td><td>"+record.data.marginRates[i].sector+"</td><td>"+record.data.marginRates[i].name+"</td></tr>";
      $("#tbody").html(tbody);
    }
  }

});
</script>