Following a tutorial from this source, I am working on creating a real-time table using PHP and AJAX. The PHP file sends back JSON-formatted values:
{ "retcode" : "0 Done", "trans_id" : "187472", "answer" : [ { "Country" : "US", "Digits" : "5", "Datetime" : "1586259875", "DatetimeMsc" : "1586259875596", "First" : "1.08580", "Second" : "1.08589" } , { "Country" : "China", "Digits" : "5", "Datetime" : "1586259877", "DatetimeMsc" : "1586259877000", "First" : "1.23311", "Second" : "1.23327"} , { "Country" : "Russia", "Digits" : "3", "Datetime" : "1586259874", "DatetimeMsc" : "1586259874585", "First" : "108.897", "Second" : "108.914" } ] }
The JS function I'm using to keep the values up-to-date in real-time is:
update : function (data) {
var message = "<p>Retcode: " + data['retcode'] + "</p>";
message += "<p>Trans ID: " + data['trans_id'] + "</p>";
message += "<p>UPDATED: " + data['answer'] + "</p>";
document.getElementById("values").innerHTML = message;
symbols.last = data['t'];
symbols.poll();
}
The PHP code snippet for fetching symbols continuously goes like this:
while (true) {
$symbols=$request->Get('/symbol_last?country=US,China,Russia');
if($symbols!=false)
{
$newsymbols=json_encode($symbols);
echo $newsymbols;
return $newsymbols;
break;
}
sleep(1);
}
This HTML file contains the necessary setup:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Long Polling Values</title>
<script src="symbols.js"></script>
</head>
<body>
<div id="values"></div>
</body>
</html>
The output can be seen here:
https://i.sstatic.net/Cv8L0.png
How can I access and display other details from the 'answer' key such as Country, First, Second in a table format? Appreciate any help.