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

如果要顯示字符串化的 JSON，可以使用助手

JS

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

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

Answer 2

由於您正在遍歷車把中的對象，因此應該這樣做 -

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

Answer 3

一個問題是each助手，這里是： {{#each context.characters}} 。 each所做的是在當前上下文中查找變量。 當您調用res.render('/', context)時，您已經將context對象傳遞給 Handlebars 。 所以，現在把手正在尋找的內context的稱為屬性的對象context ，也不會發現它。 因此，您應該將該行代碼更改為{{#each characters}} 。

同樣的事情適用於你寫{{this.name}} 。 我認為如果您解決其他問題， this實際上會起作用，但這是不必要的，因為 Handlebars 會自動查看this （當前上下文）。 所以只有{{name}}應該沒問題。

最后，如果您真的只是想將 JSON 文件顯示為純文本頁面，則不需要通過 Handlebars 模板運行它。 你可以只使用res.json(context) 。 這將返回一個 JSON 響應。 如果您的服務器配置為處理application/json MIME 類型，它應該在瀏覽器中呈現為純文本。

Answer 4

如果您將它與 Node.js 和 mongoDB 一起使用，則此答案適合您；

假設您從名為data的數據庫中得到以下響應：

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

您可能希望尋找顯示字段的方法是利用客戶端渲染。 例如，使用經典的JSON.stringify(data)作為okData管道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>

這適用於簡單的應用程序，希望它有所幫助，如果有什么東西看起來不對勁，我總是在這里檢查，並會盡力幫助你。