Вставка элементов в DOM с помощью массива JavaScript

Содержимое статьи:

• Проблема: отображение объекта Object вместо желаемых данных
• Решение: доступ к свойствам объекта
• Пример

Проблема: отображение объекта Object вместо желаемых данных

Вы столкнулись с проблемой, когда при попытке вставить данные из массива heroBase в созданный div отображается "object Object". Это происходит из-за того, что вы пытаетесь вставить сам объект, а не его свойства.

Решение: доступ к свойствам объекта

Чтобы отобразить имя героя, картинку и описание, вам необходимо получить доступ к соответствующим свойствам объекта. Вы можете сделать это, используя точку (.) или квадратные скобки ([]):

hero1.innerText = heroBase[0].name; // Имя героя

hero1.innerHTML = `<img src="${heroBase[0].path}" alt="${heroBase[0].name}">`; // Картинка

hero1.innerHTML += `<p>${heroBase[0].bio}</p>`; // Описание

Пример

Обновленный код будет выглядеть следующим образом:

const heroBase = [

{

name: 'Hero 1',

bio: `This is a Hero 1 description`,

path: './img/hero1.png'

},

{

name: 'Hero 2',

bio: `This is a Hero 2 description.`,

path: './img/hero2.png'

}

];

let body = document.querySelector("body");

// Создаем и добавляем div-элемент для первого героя

let hero1 = document.createElement("div");

hero1.className = "card";

hero1.innerHTML = `<div><h3>${heroBase[0].name}</h3></div>`;

hero1.innerHTML += `<img src="${heroBase[0].path}" alt="${heroBase[0].name}">`;

hero1.innerHTML += `<p>${heroBase[0].bio}</p>`;

body.append(hero1);

Теперь div-элемент будет содержать имя героя, картинку и описание из первого элемента массива heroBase.