使用handlebars.js显示JSON数据

沃梦达教程前端问题

2022-01-01

Display JSON data using handlebars.js(使用handlebars.js显示JSON数据)

本文介绍了使用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...
    }
   }
 }

我的页面不打印任何内容，但Console会记录所有内容。我正在使用exts.js来处理路由。

推荐答案

一个问题是each帮助器，此处：{{#each context.characters}}。each所做的是在变量的当前上下文中查找。当您调用res.render('/', context)时，您已经将context对象传递给了Handlebar。因此，现在Handlebar正在中的context对象中查找名为context的属性，但找不到它。因此您应该将代码行更改为{{#each characters}}。

同样适用于您编写{{this.name}}的位置。我认为如果您解决了其他问题，这实际上是可行的，但是this是不必要的，因为把手会自动查看this(当前上下文)。因此，只需{{name}}就可以了。

最后，如果您确实想要将JSON文件显示为纯文本页面，则不需要通过Handlebar模板运行它。您可以只使用res.json(context)。这将返回一个JSON响应。如果您的服务器配置为处理application/jsonMIME类型，则它应该在浏览器中呈现为纯文本。

这篇关于使用handlebars.js显示JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

json