How can I use index while iterating over JSONArray

问题:

I am trying to show the details of the adultJsonArr in different and I want to get it saved on action without going into writing lengthy code.

I'm not getting idea of how to use the index while iterating, I tried as mentioned in line no 5 but didn't work( @index also couldn't do job for me).

Any suggestion on how to save the changes made to the input in the adultJsonArr

1.<form> 
2.   {{#each adultJsonArr as |adultTravellerDetails index|}}
3.    <div id="adult_form{{index}}">
4.      Adult{{index}}: 
5.      <input type="text" value="{{adultJsonArr.[index].traveller_name}}" required> 
6.      <input type="dob" value="{{adultTravellerDetails.traveller_dob}}">
7.      <input type="text" value="{{adultTravellerDetails.traveller_gender}}" required>
8.    </div>
9.   {{/each}}
10.  <div {{action "confirmTravellerUpdate" adultJsonArr }}>
11.     {{mdl-button text='submit'}}
12.  </div>
13.</form>

回答1:

You can replace {{adultJsonArr.[index].traveller_name}} with {{adultTravellerDetails.traveller_name}}.

回答2:

If you would like to access a certain element from a array you should not do this in your template. The ember devs have made it hard to do so because it would likely put to much logic into the template. Use instead a computed property or a helper to retrieve your element from the collection.

E.g. you can create a helper function that receives a collection and a index and returns the desired item.

import { helper } from '@ember/component/helper';

export function colItem(params) {
  return params[0][params[1]];
}

export default helper(colItem);

And in your template:

{{helper-name collection 5}}

But remember that for this you would need an array to work. If you would like to access an item from another collection you would have to handle this accordingly.

回答3:

The index should probably only be used for display purposes. There's no need to look up things within the current index of adultJsonArr because you already have access to adultTravellerDetails.

Having said that, if you really have some use-case where you need to look up the value of the array at the current index, (or maybe you have some other sorted array with meta-data that you want to look up by index?) you can do something like this:

{{get adultJsonArr (concat index ".traveller_name")}}

We are building a path with concat for get to look up on adultJsonArr. This feels a bit hacky, but it works.