How to iterate over array of objects in Handlebars

Question

This might seem a silly question but I can t seem to find the answer anywhere   I m hitting this Web API that returns an array of objects in JSON format     Handlebars docs shows the following example    lt ul class  people list  gt       each people      lt li gt   this   lt  li gt       each    lt  ul gt    In the context of       people         Yehuda Katz        Alan Johnson        Charles Jolley          In my case I don t have a name for the array  it s just the root object of the response  I ve tried using    each   with no luck   First time using Handlebars    What am I missing   UPDATE  Here s a simplified fiddle to show you what I m asking  http   jsfiddle net KPCh4 2   Does handlebars require the context variable to be an object and not an array

User · Answer

I had a similar issue I was getting the entire object in this but the value was displaying while doing #each.

Solution: I re-structure my array of object like this:

let list = results.map((item)=>{
    return { name:item.name, author:item.author }
});

and then in template file:

{{#each list}}
    <tr>
        <td>{{name }}</td>
        <td>{{author}}</td>      
    </tr>
{{/each}}

User · Answer

Handlebars can use an array as the context  You can use   as the root of the data  So you can loop through your array data with    each        x000D   x000D  var data     x000D      x000D      Category   General   x000D      DocumentList    x000D          x000D          DocumentName   Document Name 1 - General   x000D          DocumentLocation   Document Location 1 - General  x000D           x000D          x000D          DocumentName   Document Name 2 - General   x000D          DocumentLocation   Document Location 2 - General  x000D          x000D        x000D       x000D      x000D      Category   Unit Documents   x000D      DocumentList    x000D          x000D          DocumentName   Document Name 1 - Unit Documents   x000D          DocumentList   Document Location 1 - Unit Documents  x000D          x000D        x000D       x000D      x000D      Category   Minutes  x000D      x000D     x000D   x000D    function     x000D    var source       document-template   html    x000D    var template   Handlebars compile source   x000D    var html   template data   x000D        DocumentResults   html html   x000D      x000D   row   x000D    border  1px solid red  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs handlebars js 1 0 0 handlebars js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 2 jquery min js  gt  lt  script gt  x000D   lt div id  DocumentResults  gt pos lt  div gt  x000D   lt script id  document-template  type  text x-handlebars-template  gt  x000D     lt div gt  x000D       each     x000D       lt div class  row  gt  x000D         lt div class  col-md-12  gt  x000D           lt h2 gt   Category   lt  h2 gt  x000D             DocumentList   x000D           lt p gt   DocumentName   at   DocumentLocation   lt  p gt  x000D             DocumentList   x000D         lt  div gt  x000D       lt  div gt  x000D       each   x000D     lt  div gt  x000D   lt  script gt  x000D   x000D   x000D

User · Answer

This fiddle has both each and direct json  http   jsfiddle net streethawk707 a9ssja22    Below are the two ways of iterating over array  One is with direct json passing and another is naming the json array while passing to content holder   Eg1  The below example is directly calling json key  data  inside small data variable   In html use the below code    lt div id  small-content-placeholder  gt  lt  div gt    The below can be placed in header or body of html    lt script id  small-template  type  text x-handlebars-template  gt       lt table gt           lt thead gt               lt th gt Username lt  th gt               lt th gt email lt  th gt           lt  thead gt           lt tbody gt                 data                    lt tr gt                       lt td gt   username                        lt  td gt                       lt td gt   email   lt  td gt                   lt  tr gt                 data            lt  tbody gt       lt  table gt   lt  script gt    The below one is on document ready   var small source         small-template   html    var small template   Handlebars compile small source     The below is the json   var small data                 data                     username   alan1   firstName   Alan   lastName   Johnson   email   alan1 test com                      username   alan2   firstName   Alan   lastName   Johnson   email   alan2 test com                               Finally attach the json to content holder       small-content-placeholder   html small template small data      Eg2  Iteration using each   Consider the below json   var big data                                   name   users1                   details                         username   alan1   firstName   Alan   lastName   Johnson   email   alan test com                          username   allison1   firstName   Allison   lastName   House   email   allison test com                          username   ryan1   firstName   Ryan   lastName   Carson   email   ryan test com                                                                     name   users2                   details                         username   alan2   firstName   Alan   lastName   Johnson   email   alan test com                          username   allison2   firstName   Allison   lastName   House   email   allison test com                          username   ryan2   firstName   Ryan   lastName   Carson   email   ryan test com                                                 While passing the json to content holder just name it in this way       big-content-placeholder   html big template  big data big data       And the template looks like     lt script id  big-template  type  text x-handlebars-template  gt       lt table gt           lt thead gt               lt th gt Username lt  th gt               lt th gt email lt  th gt           lt  thead gt           lt tbody gt                 each big data                    lt tr gt                       lt td gt   name                                lt ul gt                                     details                                        lt li gt   username   lt  li gt                                       lt li gt   email   lt  li gt                                     details                                lt  ul gt                       lt  td gt                       lt td gt   email   lt  td gt                   lt  tr gt                 each            lt  tbody gt       lt  table gt   lt  script gt

User · Answer

You can pass this to each block  See here  http   jsfiddle net yR7TZ 1      each this        lt div class  row  gt  lt  div gt     each

User · Answer

Using this and   this    See code below in node js   var Handlebars  require  handlebars    var randomList    James Bond    Dr  No    Octopussy    Goldeneye    var source    lt ul gt    each this   lt li gt   this   lt  li gt    each   lt  ul gt    var template  Handlebars compile source   console log template randomList      Console log output    lt ul gt  lt li gt James Bond lt  li gt  lt li gt Dr  No lt  li gt  lt li gt Octopussy lt  li gt  lt li gt Goldeneye lt  li gt  lt  ul gt

User · Answer

I meant in the template   call    You just need to pass the results as an object  So instead of calling   var html   template data     do  var html   template  apidata  data      and use    each apidata   in your template code  demo at http   jsfiddle net KPCh4 4   removed some leftover if code that crashed

[arrays] How to iterate over array of objects in Handlebars?

Examples related to arrays

Examples related to loops

Examples related to each

Examples related to handlebars.js