Display JSON data using handlebars.js

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.

Remove this in this.name.

Shanoor
– Shanoor

2015-12-02 09:55:27 +00:00
Commented Dec 2, 2015 at 9:55 — Shanoor
– Shanoor, Commented Dec 2, 2015 at 9:55

Shanoor · Accepted Answer · 2015-12-02 10:18:31Z

15

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>

answered Dec 2, 2015 at 10:18

Shanoor

13.7k2 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dwhieb · Accepted Answer · 2015-12-02 10:16:59Z

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.

answered Dec 2, 2015 at 10:16

dwhieb

1,8661 gold badge20 silver badges31 bronze badges

2 Comments

shelum Over a year ago

thank you. this worked! I will be building out the page with more content, I just wanted to get that out of the way first.

dwhieb Over a year ago

@shelum happy to help! also, you might want to edit your question to clarify that you weren't trying to render it as plain text, to help future readers.don't worry about adding thank you answers or comments either: an upvote or selected answer is thanks enough! Check out some of the docs: stackoverflow.com/help/privileges/comment

Chandan · Accepted Answer · 2015-12-02 10:37:34Z

3

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

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

edited Dec 2, 2015 at 10:37

answered Dec 2, 2015 at 10:01

Chandan

1,1389 silver badges11 bronze badges

6 Comments

shelum Over a year ago

I just tried that and now the page doesn't even load black and I get a "failed to lookup view '[object Object]' in the views directory" error when lloading the page

Chandan Over a year ago

what does context contains .. ?

shelum Over a year ago

context contains the JSON data. It is viewable in the console.

Chandan Over a year ago

can you paste it ..? or is it the same as in the question .. ?

shelum Over a year ago

my server must've had a hiccup. page is loading now but there still isn't anything printed to the page. This is what shows up in the console: i.imgur.com/VhLTDri.jpg

|

marc_s · Accepted Answer · 2020-07-04 06:33:30Z

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.

Collectives™ on Stack Overflow

Display JSON data using handlebars.js

4 Answers 4

Comments

2 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related