在小胡子中的对象列表

我正在从胡须模板引擎呈现HTML。

在处理对象列表时，我被困在渲染中。

这是我的目标：

var Prod={ "Object1": { "name": "name1", "category": "laptop" }, "Object2": { "name": "name2", "category": "laptop" }, "Object3": { "name": "name3", "category": "Desktop" }, "Object4": { "name": "name4", "category": "Mobile" } } 

以下是我想要渲染的内容：

 var template='{{#Prod}} {{name}} and {{category}} {{/Prod}}' Mustache.render(template, {"Prod":Prod}); 

但它不工作，我不明白为什么。

请告诉我我错在哪里。

Answer 1

您需要使产品列表成为数组，以便自动迭代列表function。无需通过键Object1 ， Object2 ， Object3等键Object1访问每个产品。

编辑：如果你不能改变对象格式，你可以很容易地使用Object.keys和Array#map将一种格式转换成另一种格式：

 var Prod={ "Object1": { "name": "name1", "category": "laptop" }, "Object2": { "name": "name2", "category": "laptop" }, "Object3": { "name": "name3", "category": "Desktop" }, "Object4": { "name": "name4", "category": "Mobile" } } var products = Object.keys(Prod).map(function (k) { return this[k] }, Prod) document.body.innerHTML = Mustache.render('\ <ul>\ {{#products}}\ <li>{{name}} and {{category}}</li>\ {{/products}}\ </ul>\ ', { products: products }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script> 

Answer 2

它看起来像Prod是一个对象，而不是一个列表。

如果您将代码更改为以下内容，我相信它应该可以工作。

 var Prod = [ { "name": "name1", "category": "laptop" }, { "name": "name2", "category": "laptop" }, { "name": "name3", "category": "Desktop" }, { "name": "name4", "category": "Mobile" } } var template='{{#Prod}} {{name}} and {{category}} {{/Prod}}' Mustache.render(template, { "Prod":Prod});