-3

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.Reas as |rea|}}            
                <tr> <!-- This one does not RENDER -->
                    <td>{{rea}}</td>
                </tr>
            {{/each}}
        {{/each}}
    </table>

What is the issue??

I am using Ember version 1.13

nem035
  • 34,790
  • 6
  • 87
  • 99
copenndthagen
  • 49,230
  • 102
  • 290
  • 442

1 Answers1

2

Most likely, your problem is that you are using Ember2.0 or above (based on your outer each loop) so your inner each loop has a now invalid (formerly deprecated) format. Also, you are using the same variable name item for both loops, which won't work properly.

http://guides.emberjs.com/v2.1.0/templates/displaying-a-list-of-items/

Just use the same format as in the outer loop:

Change:

{{#each item in item.Reasons}}

To:

{{#each item.Reasons as |reason|}}

EDIT

If your Reas arrays look as you've described in the comments:

item.Reas = [null]; // arrays containing a single `null` value

Then handlebars will show an empty string for these values since Handlebars coerces undefined and null to an empty string.

{{reas}} {{!-- if reas is null then an empty string is printed --}

If you want to show null and undefined values, you can make a simple helper to do so:

// helpers/show-value.js
import Ember from "ember";

export default Ember.Helper.helper(function(params) {
  let value = params[0];

  if(value === undefined) { return 'undefined'; }
  if(value === null) { return 'null'; }
  return value;

});

EDIT 2

Based on your explanation in the comment:

Since you are using Ember 1.13, you need a work around to achieve this. Here is one way:

// components/each-keys.js
export default Ember.Component.extend({
  object: null, // passed in object
  items: Ember.computed('object', function() {
    var object = Ember.get(this, 'object');

    var keys = Ember.keys(object);

    return keys.map(function(key) {
      return { key: key, value: object[key]};
    })
  })
})

Usage:

{{#each-keys object=item.Reas as |key value|}}
    <tr>
        <td>{{key}}</td>
        <td>{{value}}</td>
    </tr>
{{/each-keys}}

Here is a running example

If you update to Ember 2.0, which should be pretty straightforward from 1.13 (since 2.0 is basically 1.13 without deprecations) you can use the each-in helper to iterate over an object and get access to both its keys and values. Here is a simple example:

{{#each-in items as |key value|}}
  <p>{{key}}: {{value}}</p>
{{/each-in}}
nem035
  • 34,790
  • 6
  • 87
  • 99
  • Thx...I am using Ember version 1.13 ...let me try ur code – copenndthagen Nov 06 '15 at 08:20
  • it is still not working with the updated each statement...using {{#each as }} syntax for both inner/outer each now – copenndthagen Nov 06 '15 at 08:26
  • I just tried your example code in twiddle and it's working for me. Here is the link: https://ember-twiddle.com/8cd8554497027e23dbb5. If it's still not working for you, then can you please share your code in an ember-twiddle? – phkavitha Nov 06 '15 at 13:34
  • which version does it uses ? Also my JSON structure is slightly different and I want to print the object key itself – copenndthagen Nov 06 '15 at 14:19
  • My JSON looks like Reasons: { "Reason - 1": [null], "Reason - 2": [null] } – copenndthagen Nov 06 '15 at 14:23
  • Is it possible for you to post your code in a pen/box/fiddle or something like that? I am not sure why it's not working – nem035 Nov 06 '15 at 14:36
  • 1
    Wait, your reason arrays contain a single element which is a `null` value? – nem035 Nov 06 '15 at 15:59
  • Thx...while my Reasons is actually an object with 2 key/value pairs as shown; Reasons: { "Reason - 1": [null], "Reason - 2": [null] } ...But I want to print the keys i.e. Reason - 1 & Reason - 2 (and not the key values i.e. null array ) – copenndthagen Nov 07 '15 at 05:34
  • Well each-in does not work for Ember version < 2...Even in the link you posted, it is under EMBER 2.0 BETA – copenndthagen Nov 07 '15 at 07:09
  • It seems there is no solution to get each-in working for Ember ver < 2 – copenndthagen Nov 07 '15 at 11:17
  • @testndtv yeah, you're right, each-in is available only in Ember > 2.0, but I edited a possible workaround you can use as suggested by one of the Ember core team members – nem035 Nov 07 '15 at 17:42