Блог

Главная - Вопросы по программированию - Почему я не могу отобразить все объекты массива с помощью JS

Почему я не могу отобразить все объекты массива с помощью JS

#javascript

#javascript

Вопрос:

 const demo = document.querySelector('.demo');
const persons = [
    {name: "Abhishek", age: 20, weight: "52kg"},
    {name: "Akash", age: 21, weight: "70kg"},
    {name: "Ankit", age: 20, weight: "68kg"},
    {name: "Shubham", age: 19, weight: "60kg"},
    {name: "Harsh", age: 19, weight: "80kg"},
];

persons.forEach(function(person) {
    const data = JSON.stringify(person);
    demo.innerHTML = data;
})  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./style/style.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <h1>Learning Javascript</h1>
    <div class="demo"></div>
    <script src="main.js"></script>
</body>
</html>

Я написал этот код, чтобы отобразить все объекты внутри моего массива, но виден только последний объект. Я использовал JSON.stringify() для преобразования моего объекта в строку. Просто объясните мне причину этого недостатка.

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

1. Вы перезаписываете предыдущие назначения, когда используете demo.innerHTML = data; Для продолжения добавления используйте demo.innerHTML = data; вместо этого

2. Как и выше, если только вы не используете HTML, ваше лучшее использование innerText здесь или определенные данные не приведут к разрыву страницы.

3. …..или даже лучше, если вы используете textContent() метод для добавления дополнительных данных.

Ответ №1:

Проблема заключается в следующей строке:

 demo.innerHTML = data;

Замените его следующим, и вы увидите все.

 demo.innerHTML  = "n"   data;

Вы используете цикл forEach, а затем используете = , заменяя предыдущее значение в demo . Вы должны объединить значения.