循环对象数组并在 HTML/DOM 中显示的最佳方法？答案

【问题标题】：Best way to loop over an array of objects and display in HTML/DOM?循环对象数组并在 HTML/DOM 中显示的最佳方法？
【发布时间】：2019-04-12 07:54:15
【问题描述】：

我只是在学习如何正确使用 DOM，我正在为如何让我的 javascript 与 html 交互而苦苦挣扎。我有一组对象，其中包含有关猫的信息（只是为了帮助我学习），我想使用 HTML 显示这些对象，我想知道什么是最佳做法。

我应该将我的数据和 js 放在一个单独的文件中到我的 html 中，还是只写在 html 文档中的脚本标签中？
有没有一种方法可以在我的 html 中使用模板文字来执行 javascript，或者是否所有内容都必须是 getelementbyid 之类的方法？

非常感谢任何帮助。谢谢！

【问题讨论】：

欢迎。请阅读How to Ask，特别是显示您尝试过什么，您做过什么研究，（以及仅限于一个问题，您至少要问两个) - 并包含您的代码的最新版本，以便我们可以使用。否则，您是在要求这里的人为您完成所有的工作，这不是网站的精神:)

标签： javascript html arrays object dom

【解决方案1】：

你有很多选择。

您可以使用 jquery 模板将数据绑定到 HTML。数据将采用 javascript 格式，您可以使用占位符来显示该数据。
您可以使用 Jquery 来操作 DOM 并将数据放入 HTML 元素中。
您可以使用一些 javascript 框架（如 KnockoutJs）将数据从 javascript 数据动态绑定到 HTML

选择实际上取决于您的用例。如果您只需要显示只读信息，jquery 模板应该没问题。使用 Jquery 可能是最容易开始的，但从长远来看会很混乱且无法维护。如果您必须实现大量动态数据驱动的行为，请使用 javascript 框架。

【讨论】：

【解决方案2】：

您可以简单地创建带有猫信息 id 的 html div：

<div id="cats-info"></div>

然后在你的js文件中你可以通过id找到这个标签

const catsInfo = document.getElementById('cats-info');

然后你可以创建猫列表：

const catsData = [
    {name: 'puffy', color: 'black'},
    {name: 'flipper', color: 'white'}
];

function createCatList(cats) {
    return `
       <ul>
           cats.map(cat => convertToCatItem(cat))
       </ul>
`;
}

function convertToCatItem(cat) {
 return `<li>${cat.name} - ${cat.color}</li>`;
}

并将您的列表放入您的catsInfo 块；

catsInfo.innerHTML = createCatList(catsData);

欢迎提问

【讨论】：

hmmm.. 我不这么认为.. 它只是打印那个字符串cats.map(cat => convertToCatItem(cat))