Блог

Главная - Вопросы по программированию - Использование forEach() для массива объектов

Использование forEach() для массива объектов

#javascript

#javascript

Вопрос:

Я знаю, как получить всю информацию на веб-странице другим способом, но я пытаюсь получить ее на веб-странице с помощью метода forEach (), чтобы узнать что-то новое. Я впервые использую метод 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 ;
}

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

Комментарии:

1. У вас нет ни одного HTML элемента с именем outputDiv в вашем code mate

2. myElement ссылается на каждый объект student. Почему вы делаете myElement = внутри for...in цикла? Возможно, вы хотели сделать message = и print(message)

3. Я только что добавил свои HTML и CSS. У меня нет элемента с таким именем. Именно так я назвал переменную. Тем не менее, у меня есть выходной идентификатор в моем HTML.

4. @adiga Нет, я специально написал myElement там. Однако этого не должно быть. Сообщение должно быть там. Я не хотел использовать переменную message, чтобы избежать путаницы с областью видимости позже. Я просто исправлю комментарий рядом с объявлением, чтобы помнить, что оно изменено внутри функции.

5. Кроме того, будет лучше, если у вас будут разные имена для глобальной message переменной и message параметра print

Ответ №1:

У вас есть несколько проблем:

  1. Ваш внутренний цикл for является избыточным, поскольку он добавляет одно и то же значение к каждому информационному блоку. Вместо этого вы можете удалить его и получить доступ только к необходимым ключам для каждого из ваших объектов (используя точечную нотацию).

  2. Вы пытаетесь объединить строку с вашим объектом, когда вы делаете, myElement = "string" поскольку myElement представляет данный объект в вашем массиве. Вместо этого вы можете использовать свою пустую строку ( message ) и добавлять к ней на каждой итерации вашего цикла.

    Как только вы это сделаете, ваша message переменная будет содержать разметку, которую вам нужно распечатать по завершении вашего .forEach цикла, и таким образом вы сможете переместить print() строку за пределы вашего цикла for.

Смотрите пример ниже:

 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>

Комментарии:

1. Спасибо за помощь, Ник!

2. @HeavensGate666 не беспокойтесь!

Ответ №2:

Вам не нужно выполнять итерации по вашему элементу с помощью for...in . 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>