[英]Using forEach() on an Array of Objects
I know how to get all the information on the web page another way, but I am trying to get it on the web page with the forEach() method to learn something new. 我知道如何以另一种方式获取网页上的所有信息,但我试图在网页上使用forEach()方法来学习新的东西。 This is my first time using the forEach() method can someone please tell what I am doing wrong? 这是我第一次使用forEach()方法可以有人请告诉我我做错了什么? Everything but the values get printed onto the web page. 除了值之外的所有内容都会打印到网页上。
let students = [ { name: "Milla Jovovich", track: "Fullstack JavaScript", achievements: 5, points: 50 } ,{ name: "Bjon Aarseth", track: "iOS Development", achievements: 7, points: 70 } ,{ name: "Varg Oystein", track: "Front End Development", achievements: 12, points: 120 } ,{ name: "Wilhelm Striepe", track: "Software Engineering", achievements: 9, points: 90 } ,{ name: "Anders Hansen", track: "Data Science", achievements: 22, points: 220 } ] ; let message = ""; let student; let search; function print(message) { let outputDiv = document.getElementById("output") ; outputDiv.innerHTML = message ; } students.forEach(function(myElement) { for(let key in myElement) { myElement += "<h2>Student: " + myElement[key] + "</h2>" ; myElement += "<p>Track: " + myElement[key] + "</p>" ; myElement += "<p>Achievements: " + myElement[key] + "</p>" ; myElement += "<p>Points: " + myElement[key] + "</p>" ; } print(myElement) ; }) ;
<div id="output">
You have a few issues: 你有几个问题:
Your inner for-loop is redundant as it adds the same value to every information block. 你的内部for循环是冗余的,因为它为每个信息块添加了相同的值。 Instead, you can remove it and access only the required keys for each of your objects (using dot-notation). 相反,您可以删除它并仅访问每个对象所需的键(使用点表示法)。
You are trying to concatenate a string with your object when you do myElement += "string"
as myElement
represents a given object in your array. 当您执行myElement += "string"
时,您尝试将字符串与对象连接,因为myElement
表示数组中的给定对象。 Instead, you can use your empty string ( message
) and add to that at each iteration of your loop. 相反,您可以使用空字符串( message
)并在循环的每次迭代中添加它。
Once you have done that, your message
variable will contain the mark-up you need to print once your .forEach
loop is complete, and so you can move the print()
line to be outside your for loop. 完成后,您的message
变量将包含您的.forEach
循环完成后需要打印的标记,因此您可以将print()
行移动到for循环之外。
See example below: 见下面的例子:
let students = [{ name: "Milla Jovovich", track: "Fullstack JavaScript", achievements: 5, points: 50 }, { name: "Bjon Aarseth", track: "iOS Development", achievements: 7, points: 70 }, { name: "Varg Oystein", track: "Front End Development", achievements: 12, points: 120 }, { name: "Wilhelm Striepe", track: "Software Engineering", achievements: 9, points: 90 }, { name: "Anders Hansen", track: "Data Science", achievements: 22, points: 220 } ]; let message = ""; function print(message) { let outputDiv = document.getElementById("output"); outputDiv.innerHTML += message; } students.forEach(function(myElement) { message += "<h2>Student: " + myElement.name + "</h2>"; message += "<p>Track: " + myElement.track + "</p>"; message += "<p>Achievements: " + myElement.achievements + "</p>"; message += "<p>Points: " + myElement.points + "</p>"; }); print(message);
<div id="output"></div>
You don't need to iterate over your element with for...in
. 您不需要使用for...in
迭代元素。 The forEach
is enough. forEach
就足够了。
let students = [{ name: "Milla Jovovich", track: "Fullstack JavaScript", achievements: 5, points: 50 }, { name: "Bjon Aarseth", track: "iOS Development", achievements: 7, points: 70 }, { name: "Varg Oystein", track: "Front End Development", achievements: 12, points: 120 }, { name: "Wilhelm Striepe", track: "Software Engineering", achievements: 9, points: 90 }, { name: "Anders Hansen", track: "Data Science", achievements: 22, points: 220 } ]; let message = ""; let student; let search; function print(message) { let outputDiv = document.getElementById("output"); outputDiv.innerHTML = message; } message = ""; //declare your "message" here, the content of output students.forEach(function(myElement) { message += "<h2>Student: " + myElement.name + "</h2>"; message += "<p>Track: " + myElement.track + "</p>"; message += "<p>Achievements: " + myElement.achivements + "</p>"; message += "<p>Points: " + myElement.points + "</p>"; }); print(message); // print "message" when all students have been added to the variable
<div id="output"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.