遍历 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，您需要两样东西：一个已编译的模板和一个 "context"。定义上下文后（这里我假设它是 wrapper 变量，可能应该命名为 "context"），你需要像这样执行模板：

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);

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

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.

遍历 json 个对象的数组

Looping through an array of json objects

javascript

jquery

json

templating

handlebars.js