Javascript 使用handlebar.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会记录所有内容。我正在使用express.js处理路由

由于您在车把中的对象上进行迭代，因此应按以下方式执行-

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

---

一个问题是

each

帮助程序，这里：

{{{{each context.characters}}

。

每个

所做的是在当前上下文中查找变量。调用

res.render（'/'，context）

时，您已经将handlebar传递给了

context

对象。因此，现在Handlebar正在

context

对象中查找名为

context

的属性，但找不到它。因此，您应该将该行代码更改为

{{{each characters}}

同样的情况也适用于您编写

{{this.name}

的地方。我认为如果你解决了另一个问题，这实际上是可行的，但是

this

是不必要的，因为车把会自动查看

this

（当前上下文）。所以只要

{{name}}

就可以了

---

最后，如果您真的试图将JSON文件显示为纯文本页面，则不需要通过Handlebar模板运行它。您只需使用

res.json（上下文）

。这将返回一个JSON响应。如果您的服务器配置为处理

应用程序/json

MIME类型，则应在浏览器中将其呈现为纯文本。

如果要显示字符串化的json，可以使用帮助程序

JS

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

HTML

---

{{toJSON result}}

如果您将其与Node.js和mongoDB一起使用，则此答案适用于您

假设您的数据库中有以下名为

data

的响应：

<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>

要显示字段，您可能希望从客户端渲染中获益。例如，使用经典的

JSON.stringify（data）

作为

okData

管道传输

数据。。然后，您可以使用
{}
表示法引用它

e:g

{{{okData}
让jsonStrLookup=document.getElementById（'some-id'）.innerHTML
让js=JSON.parse（jsonStrLookup）
console.log（js）

这将适用于简单的应用程序，希望它能有所帮助，如果评论中有什么内容，我总是在这里查看，并尝试帮助您。
在
This.name
中删除
This
。我只是尝试了一下，现在页面甚至没有加载黑色，我在views目录中得到了一个“无法查找视图”[object object]”读取页面时出错
上下文包含什么内容？上下文包含JSON数据。它可以在控制台中查看。您可以粘贴它吗。。？还是和问题中的一样？我的服务器一定出故障了。页面正在加载，但仍然没有任何内容打印到该页面。这就是控制台中显示的内容：谢谢。这成功了！我将用更多的内容构建页面，我只是想先解决这个问题。@shelum很乐意帮忙！此外，您可能希望编辑您的问题，以澄清您没有试图将其呈现为纯文本，以帮助未来的读者。也不要担心添加感谢答案或评论：向上投票或选择答案就足够了！查看一些文档：
<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>