使用 handlebars.js 显示 JSON 数据

Question

我需要弄清楚如何将完整的 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...
    }
   }
 }

我的页面未打印任何内容，但控制台记录了所有内容。我正在使用 express.js 来处理路由。

Answer 1

由于您要遍历车把中的对象，因此应该按照 -

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

Answer 2

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

同样的事情也适用于你写 {{this.name}} 的地方。我认为如果您解决了其他问题，这实际上会起作用，但是 this 是不必要的，因为 Handlebars 会自动查看 this（当前上下文）。所以 {{name}} 应该没问题。

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

Answer 3

如果你想显示字符串化的JSON，你可以使用一个助手

JS

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

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

Answer 4

如果您将它与 Node.js 和 mongoDB 一起使用，这个答案适合您；

假设您从名为 data 的数据库中得到以下响应：

{                                
  _id: "5AAAAAAAAAe04fc1a1", //some id idk
  BUSINESS: 'FLEX TAPE',          
  SHOWMAN: 'PHIL SWIFT',            
  CONTACT: 'PHIL SWIFT',         
  PHONE: '11111111113',       
  ETC: 'yes',                          
}

您可能希望显示字段的目的是利用客户端呈现。例如，将 data 与经典的 JSON.stringify(data) 作为 okData 进行管道传输......然后您可以使用 {{}} 表示法引用它。

例如：

<p id="some-id" style="display: none"> {{okData}} </p>

<script>
let jsonStrLookup = document.getElementById('some-id').innerHTML
let js = JSON.parse(jsonStrLookup)

console.log(js)
</script>

这适用于 SIMPLE 应用程序，希望它能有所帮助，如果有什么不对的地方，我总是会在这里查看，并会尽力帮助您。

使用 handlebars.js 显示 JSON 数据

Display JSON data using handlebars.js

javascript

json

node.js

express

handlebars.js