Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

172
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda