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

Answer 1

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>

Answer 2

You have a few issues:

1. 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).

2. 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>