Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

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

Иван Иванов Ученик (122), на голосовании 2 месяца назад
С помощью 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".
Как сделать так, чтобы отображались имя героя, картинки и описание?
Голосование за лучший ответ
Semen Kapacuk Гуру (2872) 3 месяца назад
 hero1.textContent = heroBase[0].name 
Иван ИвановУченик (122) 3 месяца назад
Да, пробовал так. Но в этом случае он выведет только имя, а нужно чтобы сразу name, bio и path
Semen Kapacuk Гуру (2872) Иван Иванов, тебе в случае массива жизненно необходим цикл или метод массива 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}

${hero.name} ` document.body.appendChild(heroDiv); }
Dlazder Мудрец (10893) 3 месяца назад
Даже если бы такой проблемы не было, то у тебя получилось бы не красиво. В блоке hero1 была бы надпись
 { 
name: 'Hero 1',
bio: `This is a Hero 1 description`,
path: './img/hero1.png'
}
Используй dot notation (обращайся через точку) для каждого свойства объекта, вставляй точечно. Так и красиво получится. Если нужно генерировать автоматически создай функцию которая циклом будет как то перебирать все значения. Используй Object.values, или что еще придумаешь...
Иван ИвановУченик (122) 3 месяца назад
Хорошая идея! Попробую. Большое спасибо!
РукажопПросветленный (24686) 3 месяца назад
Object.values выдаст неупорядоченные значение. Ты не будешь знать что есть что.
Dlazder Мудрец (10893) Рукажоп, он вернет массив значений свойств в том же порядке как они были. Если мы точно знаем количество полей этот вариант имеет место быть. Да и потом, человек не говорил про контекст задачи, так что точно определить оптимальный вариант нельзя)
Похожие вопросы