Возвращение в DOM значений массива объектов

Question

У меня есть массив объектов - каждый объект содержит несколько значений.

Поскольку у меня есть новые объекты, они сохраняются в массиве. Тем не менее, я хотел бы опубликовать этот массив и новые объекты в моем DOM. Идея состоит в том, что мой DOM перечисляет все объекты моего массива, и каждый раз, когда создается новый объект, он добавляется в мой массив и обновляется в моем DOM.

Мне трудно понять, как опубликовать это в моем DOM.

Должен ли я иметь 2 петли? - 1 для сохранения данных в виде объекта и добавления их в мой массив при каждом запуске нового объекта - 1 опубликовать мой массив объектов в моем DOM (но не будет ли он каждый раз восстанавливать всю таблицу вместо «обновления» только новым объектом?)

Я врезался в стену этого процесса мышления, поэтому, если у вас есть советы, они более чем приветствуются!

Пока у меня есть:

1 - объявление массива объекта

2 - функция для извлечения входных данных и назначения их новому объекту

3 - функция для помещения объекта в массив

4 - при нажатии, функция: вызывает функцию для создания объекта вызывает функцию для добавления объекта в таблицу преобразует таблицу объектов в строку для публикации в DOM

Я немного застрял в том, где именно создать свой цикл.

Большое спасибо за помощь!

Answer 1

На основании вашего описания вы пытаетесь сделать что-то подобное.

// Declare array
const arr = [];

// Cache elements
const input = document.querySelector('input');
const button = document.querySelector('button');
const result = document.querySelector('#result');

// Assign event listener to the button
button.addEventListener('click', handleClick, false);

// When the button is clicked..
function handleClick() {

  // Push the new value/object to the array
  arr.push(input.value);

  // Call the function to update the page
  updatePage();
}

function updatePage() {

  // `map` over the data in the array to return an
  // array of HTML strings, and join them up
  const html = arr.map(el => `<p>${el}</p>`).join('');

  // Set the innerHTML of the result element as the
  // string `html`
  result.innerHTML = html;
}

p { color: blue; border: 1px solid red;}

<input />
<button>Add</button>
<div id="result"></div>

Так что на самом деле вам нужен только один цикл, который создает HTML, который вы добавляете на страницу.