使用handlebars.js顯示JSON數據

我需要弄清楚如何將完整的JSON響應打印到我的頁面（甚至是其中的一部分），但我似乎無法弄清楚。我將在最後填寫更多的上下文。使用handlebars.js顯示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來處理路由。

來源

2015-12-02 shelum

刪除'this'在'this.name' 。 – Shanoor

的一個問題是each幫手，在這裏：{{#each context.characters}}。 each所做的是在變量的當前上下文內查找。當您撥打res.render('/', context)時，您已經通過Handlebars context對象。因此，現在Handlebars正在尋找範圍內的context對象，該屬性名爲context，並且它不會找到它。所以你應該把這行代碼改爲{{#each characters}}。

同樣的事情適用於你寫的地方{{this.name}}。如果您解決了其他問題，我認爲這實際上可行，但this是不必要的，因爲Handlebars自動查找this（當前上下文）。所以只需{{name}}應該沒問題。

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

來源

2015-12-02 10:16:59 dwhieb

謝謝你。這工作！我將在更多內容的基礎上構建頁面，我只是想先弄清楚。 – shelum

@shelum樂意幫忙！另外，您可能想要編輯您的問題，以澄清您並未嘗試將其呈現爲純文本格式，以幫助未來的讀者。請不要擔心添加謝謝答覆或評論：upvote或選定的答案已足夠感謝！查看一些文檔：http://stackoverflow.com/help/privileges/comment – dwhieb

既然你迭代在車把上的對象，它應該做的 -

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

來源

2015-12-02 10:01:52 Chandan

我剛剛嘗試過，現在頁面甚至沒有加載黑色，並且當我載入頁面 – shelum

「context」包含什麼內容時，我在視圖目錄中出現「查找失敗的視圖[object Object]」錯誤。 – Chandan

上下文包含JSON數據。它可以在控制檯中查看。 – shelum

如果你想顯示的字符串化JSON，你可以使用一個幫手

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

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

來源

2015-12-02 10:18:31 Shanoor

使用handlebars.js顯示JSON數據

回答

相關問題