使用handlebars.js显示JSON数据

我需要弄清楚如何将完整的JSON响应打印到我的页面上（甚至是其中的一部分），但我似乎无法弄清楚。 我将最终填写更多的上下文页面。

JS文件：

app.get('/', function(req, res) { var context apiLib.fetch('acct:chars', function(err, result){ if(err) throw err context = result; console.log(result); res.render('/', context); }); }); 

把手：

  {{#each context.characters}} {{this.name}} {{/each}} 

JSON数据：

 { "result": { '1234':{ //this is the character ID "characters": { "name": 'Daniel', "CharacterID": '1234' etc... } } } 

我的页面什么也不打印，但控制台logging一切。 我正在使用express.js来处理路由。

Answer 1

一个问题是each助手，在这里： {{#each context.characters}} 。 在variables的当前上下文中 ， each做的都是什么。 当您调用res.render('/', context)时，您已经传递了Handlebars context对象。 所以现在Handlebars正在寻找一个名为context的属性的context对象，它不会find它。 所以你应该{{#each characters}}行代码改成{{#each characters}} 。

同样的事情适用于你写{{this.name}} 。 我认为如果你解决了另外一个问题，那实际上是可行的，但这是不必要的，因为Handlebars会自动查看this （当前的上下文）。 所以只需{{name}}可以了。

最后，如果您真的只是将JSON文件显示为纯文本页面，则不需要通过Handlebars模板运行它。 你可以使用res.json(context) 。 这将返回一个JSON响应。 如果您的服务器configuration为处理application/json MIMEtypes，则它应该在浏览器中以纯文本forms呈现。

Answer 2

如果你想显示string化的JSON，你可以使用助手

JS

 Handlebars.registerHelper('toJSON', function(obj) { return JSON.stringify(obj, null, 3); }); 

HTML <pre>{{toJSON result}}</pre>

Answer 3

由于您正在遍历把手中的对象，因此应该按照以下方式完成：

  {{#each context.characters}} {{#each this}} {{@key}} - {{this}} {{/each}} {{/each}}