使用 handlebars.js 显示 JSON 数据答案

【问题标题】：Display JSON data using handlebars.js使用 handlebars.js 显示 JSON 数据
【发布时间】：2016-03-06 12:08:58
【问题描述】：

我需要弄清楚如何将完整的 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 来处理路由。

【问题讨论】：

删除this 中的this.name。

标签： javascript json node.js express handlebars.js

【解决方案1】：

由于您正在迭代车把中的对象，因此应该这样做 -

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

【讨论】：

context 包含什么..？
context 包含 JSON 数据。它可以在控制台中查看。
你能粘贴它吗..？还是和问题中的一样..？
我的服务器一定有问题。页面正在加载，但页面上仍然没有打印任何内容。这是控制台中显示的内容：i.imgur.com/VhLTDri.jpg

【解决方案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)。这将返回一个 JSON 响应。如果您的服务器配置为处理 application/json MIME 类型，它应该在浏览器中呈现为纯文本。

【讨论】：

谢谢。这行得通！我将构建包含更多内容的页面，我只是想先解决这个问题。
@shelum 乐于助人！此外，您可能需要编辑您的问题，以澄清您没有尝试将其呈现为纯文本，以帮助未来的读者。不要担心添加感谢答案或 cmets：赞成或选定的答案就足够了！查看一些文档：stackoverflow.com/help/privileges/comment

【解决方案3】：

如果要显示字符串化的 JSON，可以使用 helper

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

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

【讨论】：

【解决方案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>

这适用于简单的应用程序，希望对您有所帮助，如果有些东西似乎没有评论，我总是在这里查看，并会尽力帮助您。

【讨论】：