Using forEach() on an Array of Objects

Question

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. This is my first time using the forEach() method can someone please tell what I am doing wrong? 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 don't have any HTML element named outputDiv in your code mate — Code Maniac
– Code Maniac, Commented Mar 30, 2019 at 12:19
myElement refers to each student object. Why are you doing myElement += inside for...in loop? Perhaps you meant to do message+= and print(message) — adiga
– adiga, Commented Mar 30, 2019 at 12:25
I just added my HTML and CSS. I don't have an element named that. That's just what I named the variable. I do have an output ID in my HTML, though. — HeavensGate666
– HeavensGate666, Commented Mar 30, 2019 at 12:25
@adiga No, I wrote myElement there on purpose. It shouldn't be there, though. Message should be there. I didn't want to use the message variable to avoid scope confusion later. I'll just right a comment next to the declaration to remember that it is changed inside a function. — HeavensGate666
– HeavensGate666, Commented Mar 30, 2019 at 12:37
Also, it's better if you have different names for the global message variable and the message parameter of print — adiga
– adiga, Commented Mar 30, 2019 at 12:38

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You have a few issues:

Your inner for-loop is redundant as it adds the same value to every information block. 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. Instead, you can use your empty string (message) and add to that at each iteration of your loop.

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.

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 30, 2019 at 12:24

Nick Parsons

51.7k6 gold badges62 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HeavensGate666 Over a year ago

Thank you for the help Nick!

Nick Parsons Over a year ago

@HeavensGate666 no worries!

adiga · Accepted Answer · 2019-03-30 12:34:15Z

You don't need to iterate over your element with for...in. The forEach is enough.

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>

Collectives™ on Stack Overflow

Using forEach() on an Array of Objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related