Создание нескольких кнопок - Javascript

Question

У меня есть массив объектов в Javascript. Без использования HTML мне нужно добавить кнопки для каждого объекта в массиве. Я знаю, как сделать кнопки в Javascript примерно так:

//Create the button
var button = document.createElement("button");

Но я не уверен, как добавить одну для каждого объекта в массиве. Вот мой код массива для моего массива:

var items = [
{
name: "cake",
price:"7.00",
quantity:4
},

{
name:"fries",
price:"8.00",
quantity:3
},

{
name:"brownie",
price:"5.00",
quantity:2
},

{
name:"candy",
price:"9.00",
quantity: 12
},

]

У меня есть больше объектов в моем массиве, но я добавил только несколько, чтобы минимизировать вопрос, и я хочу, чтобы имя использовалось в качестве метки кнопки , Я знаю, что мне нужно будет использовать для l oop, но я застрял на том, что писать в l oop. Я попытался найти этот вопрос в Google, но не смог найти ничего, что показывало бы, как это сделать, в Javascript. Я нашел только другие языки, которые еще не выучил. Также у меня уже есть эта ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Я хочу использовать кнопку как кнопку «Мне нравится». Каждый элемент будет иметь кнопку, при нажатии на которую элемент будет отображаться в списке. Например: пользователь любит пирожные и картофель фри, поэтому в моем «списке» будет указано пирожные и картофель фри. Каждая кнопка может быть нажата только один раз. Это похоже на концепцию добавления товаров в магазин, но я использую это для любимых товаров.

Answer 1

Вы можете создать al oop, используя метод массива forEach (), например:

const parentElement = document.querySelector('body'); // DOM location when buttons will be added
items.forEach(function(item) {
  const button = document.createElement("button");
  button.innerText = item.name;
  parentElement.appendChild(button); // to add new element to DOM
})