DOM: вставить элемент массива

Question

DOM: вставить элемент массива

Иван Иванов Ученик (122), на голосовании 1 год назад

С помощью JS необходимо создать div и вставить в него название героя, картинки и описание.

Имя героя, картинки и описание хранятся в виде объекта в массиве heroBase:

 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'
  },
]

Создаю div и передаю туда нулевой элемент массива heroBase:

let body = document.querySelector("body");
let hero1 = document.createElement("div");
hero1.className = "card";
hero1.innerText = heroBase[0]; // вот тут он мне выдает "object Object"
body.append(hero1);

Вместо имени героя, картинки и описания получаю "object Object".
Как сделать так, чтобы отображались имя героя, картинки и описание?

Answer 1

Semen Kapacuk Гуру (3947) 1 год назад

 hero1.textContent = heroBase[0].name

Иван ИвановУченик (122) 1 год назад

Да, пробовал так. Но в этом случае он выведет только имя, а нужно чтобы сразу name, bio и path

Semen Kapacuk Гуру (3947) Иван Иванов, тебе в случае массива жизненно необходим цикл или метод массива forEach

 let body = document.body; 
 
for (let i = 0; i < heroBase.length; i++) { 
    const hero = heroBase[i]; 
    const heroDiv = document.createElement('div'); 
    heroDiv.classList.add('card'); 
    heroDiv.innerHTML = ` 
        ${hero.name} 
        ${hero.bio} 
         
    ` 
    document.body.appendChild(heroDiv); 
}

Answer 2

Саня Семенов Оракул (60536) 1 год назад

https://codepen.io/norbert123/pen/mdoJmEv
как то так

Иван ИвановУченик (122) 1 год назад

Спасибо большое!

Answer 3

Даже если бы такой проблемы не было, то у тебя получилось бы не красиво. В блоке hero1 была бы надпись

 { 
    name: 'Hero 1', 
    bio: `This is a Hero 1 description`, 
    path: './img/hero1.png' 
}

Используй dot notation (обращайся через точку) для каждого свойства объекта, вставляй точечно. Так и красиво получится. Если нужно генерировать автоматически создай функцию которая циклом будет как то перебирать все значения. Используй Object.values, или что еще придумаешь...