Unable to loop through nested JSON array ( uppercase properties ) with Handlebars JS with Ember JS

Question

I am learning Ember JS and Handlebars JS so I am very new to this.

I am having an issue trying to loop through nested JSON array's. I am unable to loop through the 'Pages" in the JSON below.

Here is the JSON:

{
    "Pages": [
      {
        "Id": 1,
        "Name": "Page 1",
        "Objects": [
          {
            "Width": 100,
            "Height": 200,
            "Type": "Shape"
          },
          {
            "Width": 150,
            "Height": 250,
            "Type": "Image"     
          }
        ]
      },
      {
        "Id": 2,
        "Name": "Page 2",
        "Objects": [

        ]
      }
    ],
    "Settings": {
        "URL": "http://THEURL",
        "Location": true,
        "Navigation": true
     },
     "Id": 1,
     "Title": "The Title",
     "Description": "The Description"
}

This is my handlebars template:

<script type="text/x-handlebars" id="pages">
<div class="container">
    <div class="row">
        <h1>{{Title}}</h1> <!-- This works -->
        <h2>{{Description}}</h2> <!-- This works -->

        <!-- This doesn't work: -->
        <ul>
        {{#each Pages}}
              <li>Page ID: {{Id}} <br /> Page Name: {{Name}} <br />
                  <ul>
                  {{#each Objects}}
                    <li>{{Type}}</li>
                  {{/each}}
                  </ul>
              </li>
        {{/each}}
        </ul>

    </div>
</div>
</script>

Also, when I just add:

{{Pages}}

in the handlebars template, the output in the browser is:

[object Object],[object Object]

I am not sure if that is the issue or not.

Sorry if it was not clear. I can't loop through the 'Pages' nor the 'Objects' inside of the 'Pages'. It's just blank in the browser. — Amir
– Amir, Commented Jan 16, 2014 at 15:09
If i try your code at tryhandlebarsjs.com it works as expected. Do you get any error messages in the js console? s14.directupload.net/images/140116/gup3egpg.png — gearsdigital
– gearsdigital, Commented Jan 16, 2014 at 15:17
Wow it works there! This is strange it. It does not work in my Ember JS app. Does Ember JS treat it differently? — Amir
– Amir, Commented Jan 16, 2014 at 15:22

Kingpin2k · Accepted Answer · 2014-01-16 15:23:55Z

7

Uppercase variables are considered global scope, you need to fully qualify them or make them lowercase

http://emberjs.jsbin.com/UhIGevUf/1/edit

<div class="container">
    <div class="row">
        <h1>{{model.Title}}</h1> <!-- This works -->
        <h2>{{model.Description}}</h2> <!-- This works -->

        <!-- This doesn't work: -->
        <ul>
        {{#each page in model.Pages}}
              <li>Page ID: {{page.Id}} <br /> Page Name: {{page.Name}} <br />
                  <ul>
                  {{#each obj in page.Objects}}
                    <li>{{obj.Type}}</li>
                  {{/each}}
                  </ul>
              </li>
        {{/each}}
        </ul>

    </div>
</div>

answered Jan 16, 2014 at 15:23

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

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

1 Comment

Amir Over a year ago

Thank you! This worked! Looks like I need to fix my JSON to format it properly.

Collectives™ on Stack Overflow

Unable to loop through nested JSON array ( uppercase properties ) with Handlebars JS with Ember JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related