javascript - 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.

Answer 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}}