Как вывести массив объектов на страницу списком в JS?

Рейтинг: 0Ответов: 1Опубликовано: 17.02.2023

Помогите, пожалуйста правильно вывести массив объектов на страницу. В forEach зацикливает, вне не видны li

const flowers = [
  { 
    author: "Белі Свім",
    name: "Троянда",
    price: 60 
  }, 
  {
   author: "Джеймс Лоррі",
   name: "Тюльпан"
  }
]

let div = document.createElement('div');
div.id = 'root';

function flowerList(arr) {
    let ul = document.createElement('ul');
    books.forEach(elems => {
        let li = document.createElement('li');
        let list =
            (li.textContent = `author: ${elems.author}; name: ${elems.name}; price: ${elems.price}`);
        //console.log(li);
        ul.append(li);
        console.log(ul);
    });
    return;
}

flowerList(flowers);

document.getElementById('root').append(ul);
javascript массивы
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

В вашем коде есть несколько ошибок. Вот исправленный код:

const flowers = [
  { 
    author: "Белі Свім",
    name: "Троянда",
    price: 60 
  }, 
  {
   author: "Джеймс Лоррі",
   name: "Тюльпан"
  }
]

let div = document.createElement('div');
div.id = 'root';
document.body.append(div); // добавляем div на страницу

function flowersList(arr) {
  let ul = document.createElement('ul');
  arr.forEach(elems => {
    let li = document.createElement('li');
    li.textContent = `author: ${elems.author}; name: ${elems.name}; price: ${elems.price}`;
    ul.append(li);
  });
  return ul; // возвращаем список
}

let flowersUl = flowersList(flowers); // получаем список цветов
document.getElementById('root').append(flowersUl); // добавляем список на страницу в div с id=root

В этом коде мы сначала создаем элемент div, добавляем его на страницу, потом определяем функцию flowersList, которая принимает массив объектов и возвращает список (ul) со списком цветов. В функции flowersList мы используем метод forEach, чтобы пройти по каждому объекту массива и создать li элемент для каждого цветка. Затем мы добавляем каждый li элемент в ul, а возвращаем ul. В главной функции мы вызываем flowersList, чтобы получить ul, и добавляем его на страницу в div с id=root.