javascript 使用 handlebars.js 显示 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34039555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display JSON data using handlebars.js
提问by shelum
I need to figure out how to print the full JSON response onto my page (or even parts of it), but I can't seem to figure it out. I am going to eventually fill out the page with more context later.
我需要弄清楚如何将完整的 JSON 响应打印到我的页面（甚至它的一部分）上，但我似乎无法弄清楚。稍后我将最终填写具有更多上下文的页面。
JS file:
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);
});
});
Handlebars:
车把：
{{#each context.characters}}
{{this.name}}
{{/each}}
JSON Data:
JSON 数据：
{
"result": {
'1234':{ //this is the character ID
"characters": {
"name": 'Daniel',
"CharacterID": '1234'
etc...
}
}
}
My page prints nothing, but console logs everything. I am using express.js to handle the routing.
我的页面不打印任何内容，但控制台会记录所有内容。我正在使用 express.js 来处理路由。
回答by Shanoor
If you want to display the stringified JSON, you can use an helper
如果要显示字符串化的 JSON，可以使用助手
JS
JS
Handlebars.registerHelper('toJSON', function(obj) {
return JSON.stringify(obj, null, 3);
});
HTML<pre>{{toJSON result}}</pre>
HTML<pre>{{toJSON result}}</pre>
回答by dwhieb
One problem is the eachhelper, here: {{#each context.characters}}. What eachdoes is look within the current contextfor the variable. You've already passed Handlebars the contextobject when you called res.render('/', context). So now Handlebars is looking withinthe contextobject for an attribute called context, and it won't find it. So you should change that line of code to {{#each characters}}.
一个问题是each助手，这里是：{{#each context.characters}}。什么each是在当前上下文中查找变量。context当您调用 时，您已经将对象传递给了 Handlebars res.render('/', context)。所以，现在把手期待中的context名为属性的对象context，也不会发现它。因此，您应该将该行代码更改为{{#each characters}}.
The same thing applies to where you wrote {{this.name}}. I think that will actually work if you fix the other problem, but the thisis unnecessary, because Handlebars looks at this(the current context) automatically. So just {{name}}should be fine there.
同样的事情适用于你写的地方{{this.name}}。我认为如果您解决其他问题，这实际上会起作用，但这this是不必要的，因为 Handlebars 会this自动查看（当前上下文）。所以在{{name}}那里应该没问题。
Finally, if you're really trying to just display the JSON file as a page of plain text, you don't need to run it through a Handlebars template. You can just use res.json(context). This will return a JSON response. If your server is configured to handle the application/jsonMIME type, it should render as plain text in the browser.
最后，如果您真的只是想将 JSON 文件显示为纯文本页面，则不需要通过 Handlebars 模板运行它。你可以只使用res.json(context). 这将返回一个 JSON 响应。如果您的服务器配置为处理application/jsonMIME 类型，它应该在浏览器中呈现为纯文本。
回答by Chandan
Since you are iterating over objects in handlebars, it should be done as -
由于您正在遍历车把中的对象，因此应该这样做 -
{{#each context.characters}}
{{#each this}}
{{@key}} - {{this}}
{{/each}}
{{/each}}
