使用 handlebars.js 显示 JSON 数据

Question

I need to figure out how to print the full JSON response onto my page (or even parts of it), but I can't seem to figure it out. I am going to eventually fill out the page with more context later.

JS file:

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

    });

});

Handlebars:

 {{#each context.characters}}
 {{this.name}} 
 {{/each}}

JSON Data:

{
  "result": {
    '1234':{               //this is the character ID
      "characters": {
        "name": 'Daniel',
        "CharacterID": '1234'
        etc...
    }
   }
 }

My page prints nothing, but console logs everything. I am using express.js to handle the routing.

Answer 1

If you want to display the stringified JSON, you can use an helper

JS

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

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

Answer 2

Since you are iterating over objects in handlebars, it should be done as -

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

Answer 3

One problem is the each helper, here: {{#each context.characters}} . What each does is look within the current context for the variable. You've already passed Handlebars the context object when you called res.render('/', context) . So now Handlebars is looking within the context object for an attribute called context , and it won't find it. So you should change that line of code to {{#each characters}} .

The same thing applies to where you wrote {{this.name}} . I think that will actually work if you fix the other problem, but the this is unnecessary, because Handlebars looks at this (the current context) automatically. So just {{name}} should be fine there.

Finally, if you're really trying to just display the JSON file as a page of plain text, you don't need to run it through a Handlebars template. You can just use res.json(context) . This will return a JSON response. If your server is configured to handle the application/json MIME type, it should render as plain text in the browser.

Answer 4

If you are using it with Node.js and mongoDB this answer is for you;

Let's say you have the following response from your database called data :

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

What you might want to look for to display the fields is to take advantage from client-side rendering. piping the data with the classic JSON.stringify(data) as okData for instance.. then you can just reference it using the {{}} notation.

e:g.

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

This would work for SIMPLE applications hope it helps out, and if something seems off comment, I always check on here, and will try to help you.