Issue Iterating Over Ember.js Object in Template

Question

I'm having an issue iterating over an object and array in Ember.js in templates. I'm sure it's a way I'm implementing the Handlebars iterator but I can't seem to figure it out.

Records = {

    data: [
            [
                recordID: "1234",
                recordName: "Record Name"
            ],
            [
                recordID: "1235",
                recordName: "Record Name 5"
            ],
            [
                recordID: "1236",
                recordName: "Record Name 6"
            ]
          ],
    otherInformation: "Other Info",
    moreInformation: "More Information"
}

Then I have the template output that looks like this...

{{#each Records.data}}
    {{this}}
{{/each}}

This only gives me the first record in the data array but I want to be able to access each array and each key in the sub arrays in order to output specific values.

Eaten by a grue · Accepted Answer · 2013-11-25 20:16:13Z

2

As Marcio Rodrigues said, your array literal isn't valid.

// edit for clarification: A javascript array can contain objects. Objects are primitives, arrays, objects in literal notation or functions. You were trying to insert key-value pairs into the array, which are neither of those.

Inside of your nested array, you have a key-value pair, which can't be there on it's own, it has to be enclosed in an object literal. If you definitely want to keep the nested array structure and have the attributes as elements in an array, one way of doing it would be

Records = {
    data: [
        [
            { aKey: "recordID", aValue: "1234" },
            { aKey: "recordName", aValue: "Record Name XY" },
        ],
        [
            { aKey: "recordID", aValue: "12356" },
            { aKey: "recordName", aValue: "Record Name AB" },
        ]
    ],
    otherInformation: "Other Info",
    moreInformation: "More Information"
}

then, in your template, you can iterate over that:

<script type="text/x-handlebars" data-template-name="index">  
  {{#each record in Records.data}}
    {{#each attributePair in record}}
      {{attributePair.aKey}}:{{attributePair.aValue}}
      <br />
    {{/each}}
  {{/each}}
</script>

edited Nov 25, 2013 at 20:16

answered Nov 25, 2013 at 18:49

Eaten by a grue

3912 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

datapanda Over a year ago

you and Marcio have indicated the object is formed incorrectly. Do you have any references for the proper construction of an object where those standards are defined? Thanks

Eaten by a grue Over a year ago

Well, you are basically combining the javascript object literal and array literal syntax, which is fine by itself. It is, however, subject to certain rules, a quick search brought up these resources: answers.oreilly.com/topic/… and answers.oreilly.com/topic/…

Marcio Junior · Accepted Answer · 2013-11-25 14:33:57Z

2

Your Record.data array seems incorrect, you have two nested arrays, with a incorrect object declaration. I get this working using:

Javascript

Records={
    data: [
        {
            recordID: "1234",
            recordName: "Record Name"
        },
        {
            recordID: "1235",
            recordName: "Record Name 5"
        },
        {
            recordID: "1236",
            recordName: "Record Name 6"
        }
    ],
    otherInformation: "Other Info",
    moreInformation: "More Information"
}

Templates

  {{#each Records.data}}
    {{recordID}}
  {{/each}}

Please give a look http://jsfiddle.net/marciojunior/m7khc/

answered Nov 25, 2013 at 14:33

Marcio Junior

19.1k4 gold badges47 silver badges47 bronze badges

1 Comment

datapanda Over a year ago

Thanks for the explanation. Unfortunately the application I'm building requires there to be two nested arrays in the previous format because of an unknown number of objects. In the real application representation the object properties could be 5 or 50 so the only way to account for them is with an array. I'm assuming there's no way to view the individual nested array items by key in Handlebars with an object constructed as listed above?

Collectives™ on Stack Overflow

Issue Iterating Over Ember.js Object in Template

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related