Get data from a JSON API into JS or jquery variable - php

Question

I am trying to get some data from this api:
https://www.bitstamp.net/api/ticker/
into a jquery variable (to eventually display on a web page). It returns a JSON dictionary (more information here https://www.bitstamp.net/api/).
I tried for hours on end doing it all client side but realised that I cant because the api doesn't support cross-origin requests nor JSONP. So I then moved onto serverside code:
I have a php file 'test.php' with the following code:
<?php
$homepage = file_get_contents('https://www.bitstamp.net/api/ticker/');
echo $homepage;
?>
Then inside my html page I have the following code:
<script>
var last = JSON.parse(test.php)["last"]
document.getElementById('apidata').innerHTML=last;
</script>
<span id="apidata"></span>
But I don't know why it's not working! Can anyone please shed some light on this?
I thought jquery may be simpler but if anyone knows how to get this done with JS I'd like to hear that too. I also suspect that my php file is wrong.
EDIT: Here's a link to my php file http://www.buyabitcoin.co.uk/beta/test/test.php
and my html file http://www.buyabitcoin.co.uk/beta/test/test.html
username: 'test' password: 'test123'
EDIT: I have also tried
$.getJSON('test.php', function(response) {$("#apidata").html(response.value); });
in the html but to no avail. Can anyoneplease confirm if my php is outputting a JSON rather than a string?
Many thanks in advance

Answer 1

Modify your php file like so:
<?php
header('Content-type: application/json');
$homepage = file_get_contents('https://www.bitstamp.net/api/ticker/');
echo $homepage;
?>
The header() tells the requesting entity what sort of data it provides.
The url you request (https://www.bitstamp.net/api/ticker/) provides this json string:
{
"high": "161.00",
"last": "154.00",
"bid": "153.51",
"volume": "20295.34112055",
"low": "135.10",
"ask": "154.00"
}
Your html page has this JQuery:
$.getJSON('test.php', function(response) {
// access the response here
// e.g. get the volume
var volume = parseInt(response.volume);
// the numbers are returned as strings (numbers in quotes), thats why parseInt should be used
});

Answer 2

You can use jQuery ajax function to get JSON from the php page
like,
$.ajax({
dataType: "json",
url: 'test.php',
data: data,
success: function(data){
var last = data.last
$('#apidata').innerHTML=last;
}
});
Read more about jQuery.ajax http://api.jquery.com/jQuery.ajax/

Answer 3

You do not need to have jQuery just to download a JSON string and replace a div's content!
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
r = JSON.parse(xmlhttp.responseText);
document.getElementById("apidata").innerHTML=r;
}
}
xmlhttp.open("GET","/beta/test/test.php",true);
xmlhttp.send();
}
loadXMLDoc();

Answer 4

I managed to do what I want with the following code. This allows me to 'extract' a value from the JSON (in this example, the value for 'last') to use as a JS variable in a separate html file:
In my php file:
<?php
$ticker = file_get_contents('https://www.bitstamp.net/api/ticker/');
$obj = json_decode($ticker,true); // Split the JSON into arrays.
echo json_encode(array("myVariable" => $obj['last']));
?>
In my html file:
$.getJSON('test.php', function(data) {
var myVar = data.myVariable });
I hope this helps someone.