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

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

转载作者：行者123 更新时间：2023-11-28 01:00:39

26

4

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

 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/

26

4

0

文章推荐： css - 在另一个 "sticky"导航栏下方有一个 "sticky"按钮

文章推荐： c++ - 在C++中实现链表的困难

文章推荐： c++ - 打开超过 5 mb 的文件并将它们存储在数组中

文章推荐： c++ - Opengl 对象挤压

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

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