Q:

ember and iterating through a json array of objects

I am just testing out ember so this will be a very simple question (and might be more a javascript than ember question). I'd like to iterate through a set of objects in a model for a route. It's basically a menu, with nested menu_headers and each menu_header can have (children) menu_headers or menu_items. I'll try to post most of code so that if there's problems with it, they can hopefully be pointed out. 
{
    "status": "success",
    "data": {
        "id": 5,
        "name": "my menu here",
        "menu_headers": [
            {
                "name": "menu header1",
                "id": 13,
                "menu_items": [
                    {
                        "id": 205,
                        "header": "my header"
                    }
                ],
                "menu_headers": [
                    {
                        "id": 14,
                        "name": "menu header1",
                        "menu_items": [
                            {
                                "id": 34,
                                "header": "item",
                                "detail": "item detail"
                            },
                            {
                                "id": 34,
                                "header": "item2",
                                "detail": "item detail2"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

models:
Hex.Menu = Ember.Object.extend({
  id: null,
  name: null,
  menu_headers: null
});

Hex.MenuHeader = Ember.Object.extend({
    id: null,
    name: null,
    menu_headers: null
});

Hex.MenuItem = Ember.Object.extend({
    id: null,
    header: null,
    detail: null,
    menu_items: null

});

In my route, how do I iterate over this (see commented part below)? I can't tell if it's forEach or whether I should use jQuery $.each? Also, would doing it this way allow for two way data-binding?
Hex.MenuRoute = Ember.Route.extend({
    model: function(params) {
        return $.getJSON("/arc/v1/api/menus-test/5").then(function(data){
          d=data.data;
          var menu = Hex.Menu.create();
          menu.set('id', d.id);
          menu.set('name', d.name);
          forEach()  //??? 
          // ????          
         return menu;
        });
    }
});

thx and any advice or problems with the above code would be appreciated.

A:

Ember works perfectly fine with pojos, and since it's a menu I'm not sure if creating the objects really gains you much.  I'd just render them out and use a recursive template (I may be missing a path, but this show's the gist)
http://emberjs.jsbin.com/UMAvEke/1/edit
  <script type="text/x-handlebars" data-template-name="menu">
    <h4>Menu Name : {{name}}</h4>
    {{render 'menu_headers' menu_headers}}
  </script>

  <script type="text/x-handlebars" data-template-name="menu_headers">
    <ul>
    {{#each item in this}}
      <li>
        Header: {{item.name}}
        {{render 'menu_items' item.menu_items}}
        {{render 'menu_headers' item.menu_headers}}
      </li>
    {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" data-template-name="menu_items">
    <ul>
    {{#each item in this}}
      <li>
        Item header: {{item.header}}
        {{#if item.detail}}
        <br/>
          Item detail: {{item.detail}}
        {{/if}}
        {{render 'menu_items' item.menu_items}}
      </li>
    {{/each}}
    </ul>
  </script>

