ember and iterating through a json array of objects

Question

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.

Answer 1

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>

Answer 2

jQuery's each seems to do this fine. Would like to do this recursively but this seems to work fine.

    d=data.data;
    var menu = Hex.Menu.create();
    menu.set('id', d.id);
    menu.set('name', d.name);
    //forEach()
    $.each(d.menu_headers, function(key, value){
       var mh=Hex.MenuHeader.create();
       mh.set('id',value.id);
       mh.set('name',value.name);
       $.each(value.menu_items, function(key2, mi){
         var menu_item=Hex.MenuItem.create();
         menu_item.set('id', mi.id);
         menu_item.set('header', mi.header);
         mh.menu_items.pushObject(menu_item);

       });
       $.each(value.menu_headers, function(k3, mh2){
         var mh=Hex.MenuHeader.create();
         mh.set('id',value.id);
         mh.set('name',value.name);
         mh.menu_headers.pushObject(mh);
        });
       menu.menu_headers.pushObject(mh);
    });
    return menu;