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

Question

[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(''))

Answer 1

[Владимир]

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

Answer 2

[Сергей Кореневский]

Вообще очень странно размещать каждое значение в теге 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

Comments

[Andriy022]

короче я хз как оно делается,я уже все перепробувал что знал

[Сергей Кореневский]

let rendrerItem = function(item){
    let str = '';
    for(let prop in item){
        let data = item[prop];
        if(typeof data === 'object')
            return rendrerItem(data);
        str += `<div class='${prop}'>${data}</div`;
    }
    return str;
};
div.insertAdjacentHTML('beforeend', rendrerItem(users));

Может так?
Раскладывает по тегам объекты любой сложности/вложенности.
Писал без тестирования. В общем принцип такой должен быть.
Между прочим Тег NAV используется как контейнер, в этот тег кладут все менюшки вместе.

[Сергей Кореневский]

Andriy022, И еще.
Вы должны составлять вопрос в названии таким образом, чтобы по вопросу могли другие искать решения своих проблем. В добавок , и истории заданных вопросов в Тостере, так же будет висеть этот вопрос, через полгода или через пару лет, увидев вопрос, вы должны понять о какой проблеме идет речь.
Вообще старайтесь любой текст, код, картинку, файл, папку писать так чтобы это было справочным пособием для других и для Вас в будущем в том числе. "Ктото стену ложит, а ктото храм строит".