how to display table using handlebars with array of Object

Question

I creating a web app using express-generator using handlebar as templating engine. If I display array of object from response, it displays. But, when I each loop in view display nothing.

/********************************
model file ../controllers/books.js
*********************************/
var request = require('request');

exports.list = function(req, res, next){

  request.get({ url: "https://jsonplaceholder.typicode.com/posts" },      function(error, response, body) { 
               if (!error && response.statusCode == 200) { 
                    res.render('index', { title: 'speed Tracker', list: body });     
                  } 
              });


};
  /***********************
route file 
************************/
var express = require('express');
var router = express.Router();

var books = require('../controllers/books'); 
/* GET home page. */
router.get('/', books.list);

<!-- language: lang-html -->

                      <table id="datatable" class="table table-striped table-bordered">
                           <thead>
                               <tr>
                                   <th>ID</th>
                                   <th>Album Id</th>
                                   <th>title</th>
                                   <th>url</th>
                                   <th>image</th>
                               </tr>
                           </thead>
                          {{list}}
                           <tbody>
                              {{#each list}}
                               <tr>
                                   <td>{{id}}</td>
                                   <td>{{userId}}</td>
                                   <td>{{title}}</td>
                                   <td>{{body}}</td>
                                   <td></td>
                               </tr>
                               {{/each}}
                           </tbody>
                       </table>

json of list

[ { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, { "userId": 1, "id": 2, "title": "qui est esse", "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" }, {.....

I have added code above data is not display in each loop.

I tried both inside each loop with this and without this, But both fails — Dhananjayan
I used {{#each list}} in that code, list is a array of object. I need to construct table. — Dhananjayan
Your {{#each}} syntax is valid. Could you please provide an example list data passed to the handlebars? Also, one thing I've noticed: you are missing quotes in your <img src="" >. What is this.body format? — wscourge

Dhananjayan Dhananjayan · Accepted Answer · 2017-10-19T16:22:50

I have to convert list from String to Object in book.js file. I have add the code below.

var request = require('request');

exports.list = function(req, res, next){

  request.get({ url: "https://jsonplaceholder.typicode.com/posts" },      function(error, response, body) { 
               if (!error && response.statusCode == 200) { 
                    res.render('index', { title: 'speed Tracker', list: JSON.parse(body) });     // add JSON.parse to convert string to object :)
                  } 
              });


};

how to display table using handlebars with array of Object

1 Answers