javascript - 如何遍历对象数组并将每个对象显示在页面上？ ( Vanilla JS)

我目前正在尝试构建一个个人资料查看器类型的应用程序。我有一个对象数组，在单击页面上的“下一步”按钮后，每个对象都包含一些需要在页面上逐一显示的信息。以下是引用代码:

 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
 ]

bigArray 中包含更多 smallerArr 类型的数组。

这是我拼凑起来的代码，试图让它发挥作用:

 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();   
 }

希望所有这些至少有一点意义。非常感谢。

最佳答案

您的代码中存在一些小错误。每一个都应该更正。我只是将它们列为以下内容:

Current == bigArray[Arr][Current].length => Current == bigArray[Arr].length
Prev() 中的逻辑:我们还需要在单击 Prev 时减少计数器。

我觉得你不需要这么复杂的逻辑，我们可以把二维数组转换成一维数组，然后整个逻辑应该变得简单。

<!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>

关于javascript - 如何遍历对象数组并将每个对象显示在页面上？ ( Vanilla JS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52685425/

javascript - 如何遍历对象数组并将每个对象显示在页面上？ ( Vanilla JS)

上一篇：html - Chrome 中 html 字体大小设置为 6.25% 的 rems 的计算值是 Firefox 中的六倍

下一篇：css - 在另一个 "sticky"导航栏下方有一个 "sticky"按钮