循环遍历 json 对象数组

Question

所以，我有这个网络应用程序，我在其中使用 hbs 作为模板引擎。现在，我通过我的其他 API 发送 JSON 对象数组：

 [{";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}]

我有一个变量：disklist，它有这个数据。

到目前为止，我已经尝试过使用车把，但它似乎不起作用。

  console.log(disklist[0].name); // LOGS THE NAME PROPERLY

  var source   = $("#dlist").html();
  var template = Handlebars.compile(source);
  var wrapper  = {objects: disklist};

在html中：

<script type='text/template' id='dlist'>
  <li>
   {{#each objects}}
        <h1>{{name}}</h1>
   {{/each}}
  </li>
</script>

但没有打印出来！

我该如何解决这个问题？

另外，如果有一种方法可以只使用简单的 JavaScript，请分享！

Answer 1

您为模板使用了错误的类型。应该是text/x-handlebars-template。我不是 100% 确定这很重要，但您应该与 Handlebars' own documentation 保持一致。

另外，我没有看到实际呈现 HTML 的行。要使用 Handlebars，您需要两件事：编译的模板和“上下文”。定义上下文后（这里我假设它是 wrapper 变量，可能应该命名为“上下文”之类的名称），您需要像这样执行模板：

var renderedHTML = template(wrapper); // pass your compiled template the context
document.getElementById("container").appendChild(renderedHTML);
// you might have to use innerHTML = renderedHTML instead
// I forget if renderedHTML will be a string or DOM node
// For jQuery just use $("#container").append(renderedHTML);

您编译的模板采用您提供的上下文并将其用作插入自身的数据，并返回结果以便您可以将其插入到您的页面中。

Answer 2

纯js：

var disklist = [
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]},
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate2","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]},
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate3","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}
];


document.getElementById('container').innerHTML = disklist.map(function(disk) {
  return '<li><h1>' + disk.name + '</h1></li>';
}).join('');

<ul id="container">
</ul>

不确定这是不是你想要的？

WALKTHROUGH：我们创建一个元素并使其成为我们要渲染的内容的容器。接下来我们将它的innerHTML 设置为我们将要创建的字符串。 disklist.map 遍历 disklist 数组并使用字符串应用每个项目，在本例中为 <li><h1>{{disk.name}}</h1></li>。您可以将内容更改为您喜欢的任何内容，它只是 HTML。然后，我们使用.join('') 将字符串数组连接成一个大字符串。最后，我们将innerHTML 设置为我们刚刚创建的字符串dala。