Ember Handlebars nested each not working

1

The following Ember Handlebars template renders the 1st row, but does not render the one inside the nested each (or inner each)

 <table width="50%">
        {{#each someData.items as |item|}}
            <tr> <!-- This one RENDERS -->
                <td width="25%"><span class="boldTxt">{{item.fld1}}</span></td>
                <td width="25%">{{item.fld2}}</td>
            </tr>
{{#each item.Reasons as |reason|}}          
                <tr> <!-- This one does not RENDER -->
                    <td>{{reason}}</td>
                </tr>
            {{/each}}
        {{/each}}
    </table>

What is the issue??

I am using Ember version 1.13

2

I dont see any problems with this, seems to work just fine. Ember Twiddle Maybe there’s a typo somewhere? :confused: (item.Reasons is capitalized, maybe that?)

3

I have the reasons as object as below

reasons: {
        'tasty': [null], 
                'healthy':[null]
               }
4

So your property is reasons, but you are trying to access it as Reasons in your template:

Property names are case sensitive, change your template to item.reasons in the template and it should be fine.

5

That is just a typo in the example here…But the case is matching in my code…and it still does not work…

6

Did you check maxn’s twiddle? It has the exact code you posted, with typo fixed, and it works as expected.

7

I do not see it on Ember Twiddle

Again my reasons looks like (case-sensitive is not an issue) and I want to print the keys

{ "Reason - 1": [null], "Reason - 2": [null] }
8

You can use each-in to get access to the key (and value):

{{#each-in reasons as |key value|}}          
   <tr>
      <td>{{key}}</td>
   </tr>
{{/each-in}}

That said, it’s not great practice IMO to use keys to store data which is what you are doing, a key should be the name of the data not the data itself.

It would be better to either store the reasons as an array of strings (if you only need their names) or an array of objects if you need to store additional data for each reason.

9

Thx…But does not work in Ember version < 2

10

Indeed, the feature was introduced in Ember 2.0. In earlier versions you must convert your structure into an array and use {{#each}}

For instance, on your item object, you could add a computed property…

reasonsArray: function () {
    var reasons = get(this, 'reasons');
    return Object.keys(reasons).map(function (key) {
        return {key: key, value: reasons[key]};
    });
}.property('reasons')

Then, in your template…

{{#each item.reasonsArray as |reason|}}          
<tr>
  <td>{{reason.key}}</td>
</tr>
{{/each}}

Still, it would be much cleaner if you just stored your reasons in an array in the first place.