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.

Answer 1

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/

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