CODEWITHSUNDEEP
javascriptphpjsonajax
derrtyones
derrtyones

Reputation: 37

JSON data through JS/AJAX into PHP

Goal: I'm using the coinmarketcap.com API (link). Beforehand I got their data into PHP. Sample:

<?php
$url = "https://api.coinmarketcap.com/v1/ticker/?convert=EUR";
$response = file_get_contents($url);
$obj = json_decode($response,true);
print_r($obj);
?>

Now I want to use AJAX/JS to get live data. I now got the following JS code:

<p id="collect"></p>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (this.readyState == 4 && this.status == 200) {
        var obj = JSON.parse(this.responseText);
        document.getElementById("collect").innerHTML = obj;
    }
  };
  xhttp.open("GET", "https://api.coinmarketcap.com/v1/ticker/?convert=EUR" + Math.random(), true);
  xhttp.send();
}

(function() {
   loadDoc()
})();
setInterval ( "loadDoc()", 5000 );
</script>

Output:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

^ the output. I also tried the above code without the JSON.parse but it gave me one string of everything.

Question: How can I get the above live data back into a PHP array? I'm quite the newbie to this but I have tried for several days.

Upvotes: 2

Views: 188

Answers (2)

Erik
Erik

Reputation: 71

Writing data back to PHP is not possible afaik because PHP is evaluated on serverside and the client just gets its resulting page. But here is a solution with JavaScript, which is only running on the client side:

As you should know your result looks something like this:

[
{
    "id": "bitcoin", 
    "name": "Bitcoin", 
    "symbol": "BTC", 
    "rank": "1", 
    "price_usd": "17391.5", 
    "price_btc": "1.0", 
    "24h_volume_usd": "15047800000.0", 
    "market_cap_usd": "291076752838", 
    "available_supply": "16736725.0", 
    "total_supply": "16736725.0", 
    "max_supply": "21000000.0", 
    "percent_change_1h": "-0.14", 
    "percent_change_24h": "3.75", 
    "percent_change_7d": "45.85", 
    "last_updated": "1513104255", 
    "price_eur": "14834.288623", 
    "24h_volume_eur": "12835201583.6", 
    "market_cap_eur": "248277409254"
}, 
....
]

It's an Array of objects where each object contains the following properties (id, name, symbol, ... , market_cap_eur).

To display all those you would need to loop through the array and create some kind of dispalytemplate for the objects.

Therefore you should replace the following line of code in the registered onreadystatechange-function:

document.getElementById("collect").innerHTML = obj;

with something like:

var objlength = obj.length;
var element = document.getElementById("collect");
element.innerHTML = "";
for ( var i = 0; i < objlength; i++){
    element.innerHTML += JSON.stringify(obj[i])+"<br />";
}

This would create a stringified result for each cryptocurrency in a new line. The result of it will still be unreadable and the code to setup the innerHTML is really dirty. To enhance atleast the display even more, you could do something like:

var objlength = obj.length;
var element = document.getElementById("collect");
element.innerHTML = "";
for ( var i = 0; i < objlength; i++){
    element.innerHTML += obj[i].name+" is "+ obj[i].price_eur +"<br />";
}

which should return the name of the curreny and the current EUR price per line. You can extend this by all desired properties.

But as mentioned it's quick and dirty and please don't judge me by this code.

Also you need to delete the + Math.Random() in you request. Here is a working live example: http://plnkr.co/edit/aHXFVAjH6qoKk2vmOf0u?p=preview

Upvotes: 2

Supun Kavinda
Supun Kavinda

Reputation: 1483

PHP CODE

<?php
$url = "https://api.coinmarketcap.com/v1/ticker/?convert=EUR";
$response = file_get_contents($url);
echo $response;
?>

Because the URL returns JSON data, already

Upvotes: 0

Related Questions