'Next and Prev button to call images from API

I am trying to show a few images with description in my app with button Next and Prev. I just got one image but can get the code to show all pictures on API. This is my code so far:

HTML:

    <div>
   <img id="widget" src="http://137.108.92.9/openstack/images/widget1.jpg" width="250" height="150">
    <img id= "image">
      <h5 id="myImg"></h5>
  <button class= "prev" type="button" onclick="controller.prev()">Prev</button>
  <button class= "next" type="button" onclick="controller.next()">Next</button>

  </div>

.JS

      function next() {

                };

      this.next = function () {

        // Call the (object) array data after request next.
            var text = '';
            fetch(My API")
                .then(res => res.json())
                .then(objdata => {
                      for (var i = 0; i < objdata.data.length; i++) {
                        if (objdata.data[i].id == document.getElementById('client_id').value) {
                             text = "Id: " + objdata.data[i].id +"</br>Description: " + objdata.data[i].description + "</br>Pence_Price: " + objdata.data[i].pence_price;
                             document.getElementById("myImg").innerHTML = text;
                             document.getElementById("widget").src = "http://137.108.92.9/openstack/images/widget1.jpg";
                             console.log(text);
                         }
                         console.log(objdata);
                     }
                })
                next();
          };

API info:

    id          int(11)         /* unique identifier of this widget
url         varchar(300)    /* URL of an image of the widget
description varchar(300)    /* text description of the widget
pence_price int(11)         /* price per widget in pence

id  url description pence_price
1   http://137.108.92.9/openstack/images/widget1.jpg    Brass Self-Tapping Wood Screw 20mm  10
2   http://137.108.92.9/openstack/images/widget2.jpg    Coach Screw 10 x 50mm   12
3   http://137.108.92.9/openstack/images/widget3.jpg    Rawwlplug LX Masonry Bolts 12x140mm 13

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source