CODEWITHSUNDEEP
javascriptarrayshandlebars.js
user1032531
user1032531

Reputation: 26281

Access handlebars array using index of loop

I am using handlebars.js to iterate over categories, and then use the current array index to access an element in the series array. I am able to do so using the below helper.

var json={
    "categories": [{
            "id": 3,
            "name": "category 0"
        }, {
            "id": 6,
            "name": "category 1"
        }
    ],
    "series": [{
            "id": 1,
            "name": "DUMMY",
            "data": [{
                    "id": 5,
                    "name": "series 0 data 0"
                }, {
                    "id": 10,
                    "name": "series 0 data 1"
                }
            ]
        }
    ]
}

Handlebars.registerHelper('getArrayValues', function(ar, index, prop) {
    return ar[0].data[index][prop];
});

var template = Handlebars.compile(json);

{{#each categories}}
<p>id: {{this.id}}</p>
<p>name: {{this.name}}</p>
<p>series id with helper: {{getArrayValues ../series @index 'id' }}</p>
<p>series name with helper: {{getArrayValues ../series @index 'name' }}</p>
{{/each}}

Am I able to do so without a helper? Below is my attempt. I've also tried using lookup, but can seem to be able to access the properties that lookup returns.

{{#each categories}}
<p>id: {{this.id}}</p>
<p>name: {{this.name}}</p>
<p>series id: {{../series.[0].data.[@index].id}}</p>
<p>series name: {{../series.[0].data.[@index].name}}</p>
{{/each}}

Upvotes: 1

Views: 2325

Answers (1)

Nishant Dixit
Nishant Dixit

Reputation: 5522

One solution I founded for this, I do not know how much good it is but It is working perfectly

Try this :)

{{#each categories}}
  <p>id: {{this.id}}</p>
  <p>name: {{this.name}}</p>
  <p>series id with helper:{{#with (lookup  ../series.[0].data 
  @index) }}{{this.id}}{{/with}}</p>
  <p>series name with helper: {{#with (lookup  ../series.[0].data 
  @index) }}{{this.name}}{{/with}}</p>
{{/each}}

Upvotes: 1

Related Questions