How to iterate over an array of objects in Handlebars?

Question

This may seem like a silly question, but I can't find the answer anywhere.

I hit this web Api that returns an array of objects in JSON format:

Handlebars docs demonstrate the following example:

<ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}} </ul> 

in the context:

 { people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] } 

In my case, I don't have a name for the array, it's just the root response object. I tried using {{#each}} with no luck.

First time using Handlebars ... what am I missing?

UPDATE

Here is a simplified fiddle to show what I'm asking: http://jsfiddle.net/KPCh4/2/

Does the descriptor context variable need to be an object, not an array?

Answer 1

You can pass this to each block. See here: http://jsfiddle.net/yR7TZ/1/

 {{#each this}} <div class="row"></div> {{/each}} 

Answer 2

I meant in the template() call ..

You just need to pass the results as an object. Therefore, instead of calling

 var html = template(data); 

do

 var html = template({apidata: data}); 

and use {{#each apidata}} in your code template

demo at http://jsfiddle.net/KPCh4/4/
(deleted the remaining if code that crashed)

Answer 3

This script has both each and direct json. http://jsfiddle.net/streethawk707/a9ssja22/ .

Below are two ways to iterate over an array. One of them is associated with the direct transfer of json, and the other with the name of the json array when transferring content to the owner.

Eg1: the example below directly calls the json key (data) inside the small_data variable.

In html, use the code below:

 <div id="small-content-placeholder"></div> 

Below you can put in the header or body of html:

 <script id="small-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>email</th> </thead> <tbody> {{#data}} <tr> <td>{{username}} </td> <td>{{email}}</td> </tr> {{/data}} </tbody> </table> </script> 

Below is the finished document:

 var small_source = $("#small-template").html(); var small_template = Handlebars.compile(small_source); 

Following is json:

 var small_data = { data: [ {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" }, {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" } ] }; 

Finally, attach json to the content holder:

 $("#small-content-placeholder").html(small_template(small_data)); 

Eg2: Iterate using each.

Consider json below.

 var big_data = [ { name: "users1", details: [ {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" }, {username: "allison1", firstName: "Allison", lastName: "House", email: "[e-mail]" }, {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" } ] }, { name: "users2", details: [ {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[e-mail]" }, {username: "allison2", firstName: "Allison", lastName: "House", email: "[e-mail]" }, {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[e-mail]" } ] } ]; 

When passing json to the content holder, just name it like this:

 $("#big-content-placeholder").html(big_template({big_data:big_data})); 

And the template looks like this:

 <script id="big-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>email</th> </thead> <tbody> {{#each big_data}} <tr> <td>{{name}} <ul> {{#details}} <li>{{username}}</li> <li>{{email}}</li> {{/details}} </ul> </td> <td>{{email}}</td> </tr> {{/each}} </tbody> </table> </script> 

Answer 4

Handlebars can use an array as a context. You can use . as the root of the data. That way, you can scroll through the array data using {{#each .}} .

Here is the updated working version of your violin

Answer 5

Using this and {{this}} . See the code below in node.js:

 var Handlebars= require("handlebars"); var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"]; var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>"; var template= Handlebars.compile(source); console.log(template(randomList)); 

Console Log Output:

 <ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>