Get data from api, and display it in html

Question

I have an API file that looks like this:

I want to get info from this api and display it in html page to look like this

I've searched forum but can't find anything good for me.
If anyone could help that would be awesome! Thanks.

Answer 1

You must parse the json code to an array in php:

$array = json_decode($json_data,true);

Then you can print it out like this:

echo $array["bonusValues"];

This are for the first level keys. When you have a second level key you must use the following:

echo $array["first"]["second"];

And if you have an array in json:

echo $array["first"][0]["item_name"];

So the 0 in the middle stands for increment value of an element.

To fetch the data from an url you can use the file_get_contents function:

$json_data = file_get_contents("http://www.your-url.com/");

Answer 2

First, you should download html file. I recomend using CURL. Next decode your data from json to php array

$array = json_decode($data, true);

To use CURL

url_setopt_array($ch, array(
     CURLOPT_RETURNTRANSFER => true,
     CURLOPT_CUSTOMREQUEST => "POST",
     CURLOPT_URL => "url",
     CURLOPT_POSTFIELDS => http_build_query(array(
     "POST FIELD" => $value,
     ))
    ));
$data = curl_exec($ch);

And then use echo function for $array elements

Answer 3

You can use jQuery $.ajax and JSON.stringify to show content of JSON in nice way in browser.

Like this:

$.ajax({
   type: 'POST',
   url: '/my/api/endpoint',
   data: 'var1=value&var2=value2',
   success: function(response) {
      var data = JSON.parse(response);
      var mydata1 = data.lastTransactions;

      $("#myHtmlBox").html(JSON.stringify(obj, null, 2));
   }
});

example of using $.ajax here: jQuery Ajax POST example with PHP

or by using PHP:

$json = json_encode(file_get_contents("http://www.myapi.com/"));
$data = $json->lastTransactions;
echo json_encode($data, JSON_PRETTY_PRINT);

also use tags: <pre></pre> what will print out nice and formated JSON.