Extract data from an API with PHP

Question

Im trying to understand more about APIs thats why I got new task. Im trying to build a shop website. Everything i know is from Here(Rapidapi) All I could do is to echo out the online API on my project Server. So my Question is how do I echo(?) out the i.g 'products'.

This is my code:

<?php
$url = 'http://10.100.40.80:1337';
$collection_name = 'products';
$request_url = $url . '/' . $collection_name;
$curl = curl_init($request_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json'
]);
$response = curl_exec($curl);
curl_close($curl);
echo $response;
?>

And this is from the API:

    "id": 1,
"product_name": "Awesome Wooden Cheese",
"product_number": "MV8YUWEA7",
"description": "Sint accusantium earum adipisci consectetur velit vel aperiam aut et. Provident aut quam aperiam expedita qui est. Iste esse dolores libero eius vitae exercitationem modi. In aut sapiente qui sit porro.\n \rNemo dolores aliquid nisi molestiae. Omnis sint quia quia. Dolor corrupti ut officiis reiciendis consequatur in est. Quia consequuntur nihil atque omnis amet laboriosam.",
"price": 830,
"published_at": "2017-12-14T11:05:07.000Z",
"created_at": "2019-02-19T09:39:58.000Z",
"updated_at": "2019-02-19T09:39:58.000Z",
"user": {
  "id": 1,
  "username": "rheinschafe",
  "email": "[email protected]",
  "provider": "local",
  "confirmed": true,
  "blocked": false,
  "role": 1
},
"weight": 37307,
"discount": null,
"image": "https://images.unsplash.com/photo-1538410797877-279eaba2f663?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=800&fit=crop&ixid=eyJhcHBfaWQiOjF9",
"images": [
  
],
"categories": [
  {
    "id": 19,
    "name": "DVDs & Videos",
    "created_at": "2019-02-19T10:38:37.000Z",
    "updated_at": "2019-02-19T10:38:37.000Z",
    "product": 0
  }
]

, I would like to give it in form auf this Bootstrap form.

Thanks for helping! :)

Answer 1

First of all the API returns a JSON-String. So you have to decode it to an array first. I think that your example is just an excerpt right? So you have to loop over each product and then you can embed the product information in the bootstrap card.

Here is a code example how you can do this:

$url = 'http://10.100.40.80:1337';
$collection_name = 'products';
$request_url = $url . '/' . $collection_name;
$curl = curl_init($request_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json'
]);
$response = curl_exec($curl);
curl_close($curl);

// decode your json-string to an associative array
$products = json_decode($response, true);

This way you can output your product array in html:

<div class="row">
  <?php foreach((array) $products as $product): ?>
      <div class="col-4">
        <div class="card" style="width: 18rem;">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
              <h5 class="card-title"><?= $product['product_name']; ?></h5>
              <p class="card-text"><?= $product['description']; ?></p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
  <?php endforeach; ?>
</div>