Estoy tratando de mostrar algunas imágenes con descripción en mi aplicación con el botón Siguiente y Anterior. Acabo de recibir una imagen, pero puedo obtener el código para mostrar todas las imágenes en la API. Este es mi código hasta ahora:
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(); };Información de la API:
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