CODEWITHSUNDEEP
htmlember.jshandlebars.jsember-dataeach
EmberJS_Javascript
EmberJS_Javascript

Reputation: 1

Iterate an array with respect to another array's index in handlebars

{{#each locationTable as |locationShifts index|}}
   {{#each get reasons index as |value|}}
     {{value}}
   {{/each}}
{{/each}}

I want to do something like this. Using 2 helpers at once "each" and "get". How can i achieve something like this?

Upvotes: 0

Views: 349

Answers (2)

mistahenry
mistahenry

Reputation: 8724

If I were approaching this problem in my own codebase, I would write an @tracked getter function in Octane or a computed property in pre-octane Ember that maps the two arrays into new objects. It's much nicer IMO to map them into objects that model the relation between them (rather than rely on each item's index in two separate arrays everywhere in your codebase which isn't something I'd find intuitive and something that seems likely to result in unexpected errors later on).

Let's say I have a list of names and a list of roles. 

const names = ['Will', 'Wes', 'Janine'],
      roles = ['Father', 'Son', 'Mother'];

const people = names.map((name, idx) => {
  return {
    name: name,
    role: roles[idx]
  };
});

You can extrapolate how that might look as a computed/tracked property. The key is that I've managed to group the data logically. That way in a template you can just: 

{{#each people as |person|}}
  {{person.name}} is a {{person.role}}
{{/each}}

rather than needing to walk to discrete arrays simultaneously. Model your data in javascript and the templates are easy to write/follow

Upvotes: 3

Lux
Lux

Reputation: 18240

It would be 

{{#each (get reasons index) as |value|}}
  {{value}}
{{/each}}

but I'm not 100% sure if get works for numeric indexes on arrays.

Upvotes: 0

Related Questions