'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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
