How do I access and iterate array items by index in handlebars?

Question

I need to iterate the JSON data in the handlebars in {{#each}} statement.

This is the JSON data,

{
    "no": 0,
    "address": "Here",
    "name": "There",
    "members": [
    {
        "email": "[email protected]",
        "name": "SH",
        "sex": "F"
    },
    {
        "email": "[email protected]",
        "name": "SH2",
        "sex": "F"
    }],
    "diary": [
    {
        "ddate":"0820",
        "dcheck":"y"
    },
    {
        "ddate":"0821",
        "dcheck":"n"
    }]
}

and this is the Handlebars code.

I need to iterate 1st, 2nd, 3rd... object's properties in the members list.

I want to know what to put in instead of [0].

{{#each list}}
<tr>
    <td><a href='bd-view.html?email={{members.[0].email}}'>{{members.[0].email}}</a></td>
    <td>{{members.[0].name}}</td>
    <td>{{members.[0].sex}}</td>
    <td>{{name}}</td>
    <td>{{diary.[0].dcheck}}</td>
    <td><input type="checkbox"></td>
</tr>
{{/each}}

This is my first question in stackoverflow.

Hope to see someone answer this question.

Thanks a lot, cheers.

Can you clarify something for me? Are you needing to iterate over each object in your members list so that you have three <td> elements for each member, one for email, name, and sex, followed by the rest, or are you intending to have one <tr> for each members? — wlh
– wlh, Commented Jul 16, 2018 at 17:05

Matheus Cuba · Accepted Answer · 2018-07-16 17:13:35Z

1

You can use the following:

{{#each members}}
<tr>
    <td><a href='bd-view.html?email={{email}}'>{{email}}</a></td>
    <td>{{name}}</td>
    <td>{{sex}}</td>
    <td>{{name}}</td>
    {{#with (lookup ../diary @index)}}
    <td>{{dcheck}}</td>
    {{/with}}    
    <td><input type="checkbox"></td>
</tr>
{{/each}}

Using the #each to iterate your array, and the function #lookup to access to relative position of the array diary

answered Jul 16, 2018 at 17:13

Matheus Cuba

2,1662 gold badges24 silver badges31 bronze badges

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

Comments

Bryan Dellinger · Accepted Answer · 2018-07-16 17:31:25Z

0

I actually upvoted Matheus answer using the with lookup of the index. however I did it a different way where I manipulate the data before passing it in.

for (var i = 0; i < data.members.length; i++) {
  data.members[i].dcheck = data.diary[i].dcheck;
}

here is a fiddle http://jsfiddle.net/N2b5M/6750/

answered Jul 16, 2018 at 17:31

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

Collectives™ on Stack Overflow

How do I access and iterate array items by index in handlebars?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related