Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

161
Views
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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!