遍历json对象数组

Question

因此，我有一个使用hbs作为模板引擎的Web应用程序。 现在，从我的其余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

普通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。

Answer 2

您为模板使用了错误的类型。 它应该是text/x-handlebars-template 。 我不是100％确信这很重要，但是您应该与Handlebars自己的文档保持一致。

另外，我没有看到实际呈现 HTML的行。 要使用把手，您需要做两件事：编译后的模板和“上下文”。 在定义了上下文之后（这里我假设它是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);

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