Ember Handlebars Iterate object and display key inside nested each helper

Question

I want to iterate and render some text in my Ember Handlebars template

I have a JSON as below; (comes within item)

"reas":{"Display Text 1":[null],"Display Text 2":[null]}

I want to display the text (Display Text 1/Display Text 2) on UI i.e. keys of my object. So in my Ember Handlebars template, I do

{{#each item in item.reas}}
    <tr>
        <td>{{item}}</td>
    </tr>
{{/each}}

Earlier I had also tried the {{@key}

But I am unable to get the text. What am I doing wrong ?

PS: Please remember that this is Handlebars within Ember and this is nested each i.e. there is an outer each in the template.

Just to add I also have a outer each {{#each someData.items as |item|}} and then iterate over item.reasons inside this outer each — copenndthagen, Nov 05 '15 at 14:02

score 1 · Answer 1 · answered Nov 05 '15 at 13:08

1

Given following JSON (beautified version of one from your question):

{
    "reasons": {
        "Display Text 1": [
            null
        ],
        "Display Text 2": [
            null
        ]
    }
}

You could iterate on it using {{each-in}} helper:

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

answered Nov 05 '15 at 13:08

Daniel Kmak

18,164
7
66
89

I am getting Assertion Failed: A helper named 'each-in' could not be found – copenndthagen Nov 05 '15 at 13:44
i am using Ember v 1.13 – copenndthagen Nov 05 '15 at 13:47
just one more thing..i also have a outer each {{#each someData.items as |item|}} and then iterate over item.reasons ...so not sure if that can cause an issue – copenndthagen Nov 05 '15 at 14:02
`each-in` helper is available in Ember 2.0+. – Daniel Kmak Nov 05 '15 at 14:36
Yes, but what about nested each ? – copenndthagen Nov 05 '15 at 14:41
Hmm...but am using Ember v 1.13 ...so not sure what would work for me – copenndthagen Nov 05 '15 at 14:57
Actually I got Assertion Failed: Helpers may not be used in the block form, for example {{#my-helper}}{{/my-helper}}. Please use a component, or alternatively use the helper in combination with a built-in Ember helper, ...so was wondering if nested each works ? – copenndthagen Nov 05 '15 at 14:58
If you use 1.13 then unfortunately you can't expect each-in working. – Daniel Kmak Nov 05 '15 at 15:02
any alternate approach with nesting support? – copenndthagen Nov 05 '15 at 15:05
His JSON might be valid by sytanx. However It does not make any logical sense having one object with different property names for same descriptive key. And by having a property "REASONS" you are obviously referencing to ARRAY not an object that has 5 properties with the exact same mission. PERSONS : { name1: "bla", name2: "boo" } Its correct by syntax but semantically wrong! Persons : [ { name: "bla"} , { name: "boo" }] – kristjan reinhold Nov 05 '15 at 15:44

Ember Handlebars Iterate object and display key inside nested each helper

1 Answers1

Linked