我无法获得实际的元素数量

Question

I'm having a problem returning elements from my object array.

I have a slideshow in which an image (photo of the book) and a text (title of the book) must appear.

For the creation of the slideshow I have no problems because I am using querySelectors as shown in the code below.

The problem lies in showing the images with their titles.

In the first part of the code I have an array of objects that gives me the total number of elements present and based on this I create the slideshow (to create the scroll points and the "container" to contain the images) and then subsequently I call the function myFunction with id argument to return the single element (identified by an id).

What I notice is that the urls with the ids are returned to me, but the url with that id is returned multiple times (so it gets copied) and not just once as expected; I should have only 4 url in total (each with the specific id of the element, since only 4 elements). The same happens when I return the array of objects, it does not return 4 but many more. (Below)

Referring to url1:

.../books/123456

.../books/123456

.../books/135623

.../books/123456

.../books/135623

.../books/123789

.../books/123456

.../books/135623

.../books/123789

.../books/146975

If I click on the arrows of the slideshow I only receive one image, the other images I do not receive.

I have no mistakes.

 var slideIndex = 1; var outerXmlhttp = new XMLHttpRequest(); var url = "https://wjko8t4509.execute-api.us-east-2.amazonaws.com/books"; outerXmlhttp.onreadystatechange = function () { var innerXmlhttp; if (this.readyState == 4 && this.status == 200) { var allbook = JSON.parse(this.responseText); for (var i = 0, len = allbook.Items.length; i < len; i++) { id = allbook.Items[i].id document.querySelector('.slideshow-container').innerHTML += ` <div class="mySlides fade"> <div class="numbertext">${i+1}/${allbook.Items.length}</div> <img id="img" src onerror="this.onerror=null; this.src=myFunction(${id});" style="width:100%"> <div class="text" id="title" onclick="myFunction(${id})"></div> </div>`; document.querySelector('#punt').innerHTML += ` <span class="dot" onclick=currentSlide(${i+1})></span>`; showSlides(slideIndex); myFunction(id); } } }; outerXmlhttp.open("GET", url, true); outerXmlhttp.send(); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides fade"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } function myFunction(id) { var url1 = "https://wjko8t4509.execute-api.us-east-2.amazonaws.com/books/" + id; innerXmlhttp = new XMLHttpRequest(); innerXmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); document.getElementById("img").src = "book_img/" + myArr.Item.immagine; document.getElementById("title").innerHTML = `<a href="fragmentProva.html?id=${id}">${myArr.Item.titolo}</a>`; } }; innerXmlhttp.open("GET", url1, true); innerXmlhttp.send(); }

 <div class="slideshow-container" id="slideshow"> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div id="punt" style="text-align:center"> </div>

EDIT

Array allbook with error:

Answer 1

Several things I noticed:

1. Doesn't define the id
2. As you state, the data structure from api will look like {"Item":{"marca":"Love","titolo":"You will be missed indefinitely","id":"123456","immagine":"ind.jpg","data":"27/11/2021"}} , but are trying to loop over all the item inside item which will be incorrect, you should loop over allbook .
3. It should be allbook[i].Items.length instead of allbook.Items.length

 var slideIndex = 1; let id; var outerXmlhttp = new XMLHttpRequest(); var url = "https://wjko8t4509.execute-api.us-east-2.amazonaws.com/books"; outerXmlhttp.onreadystatechange = function() { var innerXmlhttp; if (this.readyState == 4 && this.status == 200) { var allbook = JSON.parse(this.responseText); for (var i = 0, len = allbook.length; i < len; i++) { id = allbook[i].Items.id document.querySelector('.slideshow-container').innerHTML += ` <div class="mySlides fade"> <div class="numbertext">${i+1}/${allbook[i].Items.length}</div> <img id="img" src onerror="this.onerror=null; this.src=myFunction(${id});" style="width:100%"> <div class="text" id="title" onclick="myFunction(${id})"></div> </div>`; document.querySelector('#punt').innerHTML += ` <span class="dot" onclick=currentSlide(${i+1})></span>`; myFunction(id); } showSlides(0); } }; outerXmlhttp.open("GET", url, true); outerXmlhttp.send(); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides fade"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } function myFunction(id) { var url1 = "https://wjko8t4509.execute-api.us-east-2.amazonaws.com/books/" + id; innerXmlhttp = new XMLHttpRequest(); innerXmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); document.getElementById("img").src = "book_img/" + myArr.Item.immagine; document.getElementById("title").innerHTML = `<a href="fragmentProva.html?id=${id}">${myArr.Item.titolo}</a>`; } }; innerXmlhttp.open("GET", url1, true); innerXmlhttp.send(); }

 <div class="slideshow-container" id="slideshow"> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div id="punt" style="text-align:center"> </div>