How to render JSON Array using handlebars

Question

I am trying to render a repeating UI component with Handlebars.js..

<div class="container-fluid article-container">
    {{#each this}}
        <h1>{{header}}</h1>
        <h1>{{url}}</h1>
        <h1>{{body}}</h1>
    {{/each}}
</div>

The JSON Data coming back from the API Server is given below..

router.get("/api/fetch", function(req, res) {
  var respData = [
    {
      header: "U.S. Releases Surveillance Records of Ex-Trump Aide",
      url:
        "https://www.nytimes.com/2018/07/21/us/politics/carter-page-fisa.html",
      body:
        "The release offered a rare glimpse of national security wiretap files and raised echoes of a fight in February over the Russia inquiry between Republicans and Democrats on the House Intelligence Committee."
    }
  ];
  res.render("index", respData);
});

The H1 tags are showing up empty in the UI when the browser renders the page.. Can someone please help me out?

leogoesger · Accepted Answer · 2018-07-21 23:32:59Z

3

For example, if you api data is coming back as this:

var icecreams = [
  { name: "vanilla", price: 10, awesomeness: 3 },
  { name: "chocolate", price: 4, awesomeness: 8 },
  { name: "banana", price: 1, awesomeness: 1 },
  { name: "greentea", price: 5, awesomeness: 7 },
  { name: "jawbreakers", price: 6, awesomeness: 2 },
  { name: "vanilla", price: 10, awesomeness: 3 }
];

Then your handlebar file would be

{{#each ics}}
  <p>Flavor: {{name}}</p>
  <p>Price: ${{price}}</p>
  <p>Awesomeness: {{awesomeness}}</p>
  <hr>
{{/each}}

Express route:

app.get("/icecreams", function(req, res) {
  res.render("ics", { ics: icecreams });
});

This will render all the ice-creams. For your example, it will just render one.

This example is taken from one of my demos.

answered Jul 21, 2018 at 23:32

leogoesger

3,8507 gold badges40 silver badges74 bronze badges

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

Collectives™ on Stack Overflow

How to render JSON Array using handlebars

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related