CODEWITHSUNDEEP
javascriptarraysember.jshandlebars.js
datapanda
datapanda

Reputation: 71

Issue Iterating Over Ember.js Object in Template

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.

Upvotes: 1

Views: 1141

Answers (2)

Eaten by a grue
Eaten by a grue

Reputation: 391

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>

Upvotes: 2

Marcio Junior
Marcio Junior

Reputation: 19128

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/

Upvotes: 2

Related Questions