How to access JSON array with php and concatenate that to html

Question

I am using a API to get deals from a shopping website and I get the following JSON response -

{
    "update_time": "2020-07-23 22:01:31",
    "offers": [{
        "products": [{
            "title": "Product Name",
            "endDate": "2020-07-24 03:55:01",
            "url": "https://store.com/productid",
            "offerPercent": 87,
            "offerPrice": "12.74",
            "id": "3cbfdc55",
            "normalPrice": "99.99",
            "reviewRating": 4.7428455,
            "imageUrl": "https://store.com/productid/image",
            "totalReviews": "1856"
        }, { //This repeats alot of times

I am tried to use PHP to:

1 Retrieve the data into PHP

2 Loop through all of the items, storing all of the parameters, like url , title etc.

3 Concatenate that with some html (like a div tag) eg:

$html = '';

$html = $html . '<div>Title' . $title .'</div>'; //Repeating this for each item?

Is that possible, if so, how? Could you point me in the right direction?

Edit: I used json_decode to convert the json to php ( $someArray json_decode($jsonlink, true); then I used foreach to read the contents

foreach ($someArray as $key => $value) {
    echo $value[1][1];
}

And the webpage showed up as blank. What am I doing wrong.

Answer 1

Yes you can convert your json object to php structure by using json_decode in php, this will transform the json to a php array like this.

$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
json_decode($json)

The output will be like this.

object(stdClass)#1 (5) {
["a"] => int(1)
["b"] => int(2)
["c"] => int(3)
["d"] => int(4)
["e"] => int(5)

}

After that you have to use a recursive function or a foreach to read the object and then get and print the information that you need.

You can read this info here PHP json_decode PHP foreach

Answer 2

After decoding your JSON using json_decode you can loop through the items like this (using provided code as example):

// $raw_json would be the json you received
$data = json_decode($raw_json);

$html = "";
foreach($data->offers as $offer){
    // $offer now has all of the child properties e.g. $offer->products
    foreach($offer->products as $product){
        // $product now has all of the child properties e.g. $product->title
        $html .= "<div>Title: {$product->title}</div>";
    }

}

json_decode has a second parameter which you can pass true to ensure it returns an Associative Array meaning you can access properties like $variable["propName"] . This would change the above code to:

// $raw_json would be the json you received
$data = json_decode($raw_json, true);

$html = "";
foreach($data['offers'] as $offer){
    // $offer now has all of the child properties e.g. $offer['products'[
    foreach($offer['products ']as $product){
        // $product now has all of the child properties e.g. $product['title']
        $html .= "<div>Title: {$product['title']}</div>";
    }
}

Answer 3

You need to loop inside the array that conatains the data you want.

$data = json_decode($raw_json);
foreach ($data['offers']['products] as $product) {
    echo $product['title'];
}

this is how you display the data on your website.

If you want to display your data with html and css styles:

1. First what i do is copy the html component like a bootstrap card, row, col, etc.
2. then paste it on a variable

$html = '<div>
<h1>here goes my div</h1>
<img src="here/goes/your/url.png" />
<p>Description</p>
</div>';

3. Then, replace the dummy data with your own data from the foreach array:

$data = json_decode($raw_json);
 foreach ($data['offers']['products'] as $product) {
  $html = '<div>
  <h1>'.$product['title'].'</h1>
  <img src="'.$product['imageUrl'].'" />
  <p>'.$product['normalPrice'].'</p>
  </div>';
 }

4. Finally use echo to render the component

$data = json_decode($raw_json);
 foreach ($data['offers']['products'] as $product) {
  $html = '<div>
  <h1>'.$product['title'].'</h1>
  <img src="'.$product['imageUrl'].'" />
  <p>'.$product['normalPrice'].'</p>
  </div>';
 echo $html;
 }