@Andriy022

Как сделать код динамичние?

Как сделать код динамичнее, вот если у мене будет 1000 ключей?

et users = [ 
    {
        name: 'petya',
        age: 30,
        status: true,
        address: {city: 'New York', country: 'USA', street: 'East str', houseNumber: 21}
    },
    {
        name: 'kolya',
        age: 29,
        status: true,
        address: {city: 'Budapest', country: 'Hungary', street: 'Kuraku', houseNumber: 78}
    }]
let div = document.createElement('div')
document.body.append(div)
div.insertAdjacentHTML('beforeend', users.map(item =>
`<div>
<div>${item.name}</div>
<div>${item.age} </div>
<div>${item.status} </div>
<div>
<nav>${item.address.city}</nav>
<nav>${item.address.country}</nav>
<nav>${item.address.street} </nav>
 <nav>${item.address.houseNumber}</nav>
</div>
 </div>`).join(''))
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ответы на вопрос 2
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Можно использовать
https://developer.mozilla.org/en-US/docs/Web/JavaS...
но обратите внимание на

The loop will iterate over all enumerable properties of the object itself and those the object inherits from its prototype chain
Ответ написан
Комментировать
Dier_Sergio_Great
@Dier_Sergio_Great
Увлеченный человек
Вообще очень странно размещать каждое значение в теге NAV.
Если все значения будут в тегагх DIV, то уже проще будет.
div.insertAdjacentHTML('beforeend', users.map(item => {
let str= '<div>';
for(let prop in item){
let data = item[prop];
str += `<div class='${prop}'>${data}</div`;
}
str += `</div>`;
return str;
}).join(''))

Ну а потом в CSS расставите стили с положением свойств в карточке.
но тут проблемка в одном из свойств объекта есть свойство address которое в свою очередь имеет свои свойства и в данном примере выводится не будут.
Если таких свойств с вложенными объектами с неизвестными именами будет много, то скрипт угадывать этот не умеет для кого какие с войства выбирать.
Вам нужно в моем примере вложить проверку на то что свойства item явялется строкой или вложенным объектом, если строкой то все ОК, если объектом то надо в условии дополнительно разваорачивать подобный цикл FOR
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы