How to go through an array of objects and display each on the page? (Vanilla JS)

Question

I am currently trying to build a profile viewer sort of app. I have an array of objects, each of which contains bits of information that need to be displayed on the page one by one, after clicking the 'Next' button on the page. Here is the code for reference:

 const bigArray = [
      smallerArr = [

         {
           name: "Name",
           info: "Information",
           img: "/Images/image.jpg"
         },

         {
           name: "Name",
           info: "Information",
           img: "/Images/image.jpg"
         },

         {
           name: "Name",
           info: "Information",
           img: "/Images/image.jpg"
         }

      ],

     smallerArr1 = [

         {
           name: "Name",
           info: "Information",
           img: "/Images/image.jpg"
         },

         {
           name: "Name",
           info: "Information",
           img: "/Images/image.jpg"
         },

         {
           name: "Name",
           info: "Information",
           img: "/Images/image.jpg"
         }

      ] // Many more below
 ]

There are more smallerArr-type arrays held within the bigArray.

Here is the code I've thrown together to try and make it work:

 let Current = 0;
 let Arr = 0;
 let Counter = 0; // Multiple counters to keep track of where we're at in the array

 next.style.display = "inline-block"; // Display 'Next' button
 restart.style.display = 'none'; // Hide 'Restart' button
 previous.addEventListener("click", Prev); // Added event to go to previous profile
 next.addEventListener("click", Next); // As above, but for next profile
 restart.addEventListener("click", Restart);


 function Prev() {
         if(Current == 0){
             window.location.reload(); // If at first profile, reload page
         } else {
             Current--;
         }

         name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`
         text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`
         img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`

     }

 function Next() {
         previous.style.display = 'inline-block';
         Current++;
         Counter++;
         if(Counter > 0) {
             next.innerHTML = 'NEXT';
         }
         if(Current == bigArray[Arr][Current].length) {
             Arr++; // Go to next "smallerArr"
             Current = 0; // Reset Current to start from first element within next "smallerArr"
         }
         if(Counter == bigArray[Arr][Current].length){
             next.style.display = 'none';
             previous.style.display = 'none';
             restart.style.display = 'inline-block'; // going through elements has finished
         }

         name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`;
         text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`
         img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`
         getQuote();   
 }

Hopefully all of this made at least a bit of sense. Many thanks in advance.

Answer 1

there are a few small errors in your code. each should be corrected. I just list them as the following:

Current == bigArray[Arr][Current].length => Current == bigArray[Arr].length
logic in Prev() : we also need to decrease the Counter when Prev is clicked.

I think you don't need to have this complex logic, we could just convert the 2D array into 1D array, then the whole logic should became simple.

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> </head> <body> <h1>A Web Page</h1> <p id="name">name</p> <p id="text">name</p> <p id="img">name</p> <button type="button" id='previous'>previous</button> <button type="button" id='next'>next</button> <script> const bigArray = [ smallerArr = [ { name: "Name1", info: "Information", img: "/Images/image.jpg" }, { name: "Name2", info: "Information", img: "/Images/image.jpg" }, { name: "Name3", info: "Information", img: "/Images/image.jpg" } ], smallerArr1 = [ { name: "Name4", info: "Information", img: "/Images/image.jpg" }, { name: "Name5", info: "Information", img: "/Images/image.jpg" }, { name: "Name6", info: "Information", img: "/Images/image.jpg" } ] // Many more below ] let Current = 0; let Arr = 0; let Counter = 0; // Multiple counters to keep track of where we're at in the array next.style.display = "inline-block"; // Display 'Next' button //restart.style.display = 'none'; // Hide 'Restart' button previous.addEventListener("click", Prev); // Added event to go to previous profile next.addEventListener("click", Next); // As above, but for next profile //restart.addEventListener("click", Restart); let name = document.getElementById("name"); let text = document.getElementById('text') function Prev() { if(Current == 0 & Counter ==0){ window.location.reload(); // If at first profile, reload page } else { Current--; } Counter--; if(Current == -1){ Arr--; // Go to next "smallerArr" Current = bigArray[Arr].length-1; // Reset Current to start from first element within next "smallerArr" } name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`; text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`; //img.innerHTML = `<img src="${bigArray[Arr][Current].img}">` } function Next() { previous.style.display = 'inline-block'; Current++; Counter++; if(Counter > 0) { next.innerHTML = 'NEXT'; } if(Current == bigArray[Arr].length) { Arr++; // Go to next "smallerArr" Current = 0; // Reset Current to start from first element within next "smallerArr" } if(Counter == bigArray.flat().length){ next.style.display = 'none'; previous.style.display = 'none'; //restart.style.display = 'inline-block'; // going through elements has finished } name.innerHTML = `<h4>${bigArray[Arr][Current].name}</h4>`; text.innerHTML = `<p>${bigArray[Arr][Current].info}</p>`; console.log(name.innerHTML); //img.innerHTML = `<img src="${bigArray[Arr][Current].img}">`; //getQuote(); } </script> </body> </html>

How to go through an array of objects and display each on the page? (Vanilla JS)

Question

1 answers

solution1
0 2018-10-07 06:28:08

How to go through an array of objects and display each on the page? (Vanilla JS)

Question

1 answers

solution1 0 2018-10-07 06:28:08

solution1
0 2018-10-07 06:28:08