Ассоциированный массив записать в виде списка

Question

Ассоциированный массив записать в виде списка

artur petrosyan Ученик (101), на голосовании 1 год назад

добрый день у нас есть ассоциированный массив с данными и ключами нужно записать этот массив в виде ненумерованного списка

 var fruukti= { 
    frukt1: "абрикос", 
    frukt2: "слива", 
    frukt3: "киви", 
    frukt4: "яблоко", 
    frukt5: "груша", 
    frukt6: "банан", 
    frukt7: "гранат", 
}

Answer 1

var fruukti= {
frukt1: "абрикос",
frukt2: "слива",
frukt3: "киви",
frukt4: "яблоко",
frukt5: "груша",
frukt6: "банан",
frukt7: "гранат",
};

var list = document.createElement("ul"); // Создаем элемент ненумерованного списка

for (var key in fruukti) { // Перебираем ключи и значения объекта fruukti
var item = document.createElement("li"); // Создаем элемент списка для каждого ключа
item.innerText = fruukti[key]; // Добавляем значение ключа в текст элемента списка
list.appendChild(item); // Добавляем элемент списка в ненумерованный список
}

document.body.appendChild(list); // Добавляем ненумерованный список на страницу

Answer 2

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

мазохисты используют циклы и склеивают строки, остальные создают объект

 UL = document.createElement('ul'); 
ol = Object.values(fruukti).map(i => { 
    li = document.createElement('li'); 
    li.innerText = i; 
    UL.appendChild(li) 
}) 
UL.outerHTML// -  здесь будет список

ПавелПросветленный (25621) 1 год назад

Нормальные программисты JavaScript:

Объявляют переменные используя const/let и не засоряют глобальный объект window всякими одноразовыми переменными.
Не называют переменные, которые не являются константами, используя верхний регистр.
Не используют метод map как цикл.
Не создают переменные ('ol'), которые в дальнейшем никак не используются в коде (ещё и повторно засоряют window см. 1 пункт).
Используют свойство textContent вместо innerText (который не вызывает reflow), когда работают с текстовыми данными элемента.

 const ul = document.createElement('ul');
const ols = Object.values(fruukti).map(fr => {
  const li = document.createElement('li');
  li.textContent = fr;
});
ul.append(...ols);
ul.outerHTML // здесь будет HTML код списка
ul           // здесь будет сам список

ПавелПросветленный (25621) 1 год назад

Что самое забавное, ты в негативном ключе пишешь "используют циклы", когда сам используешь цикл замаскированный под метод map. В циклах нет ничего плохого. Это незаменимая часть любого языка программирования.
Метод map создаёт новый массив, используя за основу существующий массив. Ты же создаёшь массив заполненный undefined значениями (из-за отсутствия return) и по какой-то причине его сохраняешь в переменную.
В твоём случае уместнее forEach или обычный цикл:

 const ul = document.createElement('ul');  
Object.values(fruukti).forEach(i => {  
    const li = document.createElement('li');  
    li.textContent = i;  
    ul.append(li);  
});

ПавелПросветленный (25621) 1 год назад

Поправка...

 ...
const ols = Object.values(fruukti).map(fr => { 
  const li = document.createElement('li'); 
  li.textContent = fr;
  return li; // забыл добавить
});
...