返回对象数组的 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。