title: How to read nested JSON structure with a Sencha Touch Data Model?
body: <p>I've been trying to figure this out all evening but to no avail. I have a JSON structure as follows (coming from another system so I can't change its structure):</p>
  
  <pre>
  
      {
          "parents":{
              "parent":[
               {
                   "parentId":1,
                   "children":{
                       "child":[
                        {
                            "childId":1,
                        },
                        {
                            "childId":2,
                        }
                     ]
                  }
               },
               {
                  "parentId":2,
                  "children":{
                     "child":[
                        {
                           "childId":1,
                        },
                        {
                           "childId":2,
                        }
                     ]
                  }
               }
            ],
            "pageNum":1,
            "pageSize":2
         }
      }
  
  </pre>
  
  <p>However, I can't figure out what the correct structure for the data models should be. I've tried the following but it does not work. BTW, I can access the parent information. The issue is with accessing the child information. So, I guess there is something wrong with how I've set up the relationship data.</p>
  
  <pre>
  
      Ext.regModel("ParentModel", {
          hasMany: { 
              model: 'ChildrenModel', 
              name: 'children.child' // not too sure about this bit
          },
          fields: [
              {name: 'parentId', type: 'string'}
          ],
  
          proxy: {
              type: 'ajax',
              url : 'models.json',
              reader: {
                  type: 'json',
                  root: 'parents.parent' // this works fine
              }
          }
      });
  
      Ext.regModel('ChildrenModel', {
          belongsTo: 'ParentModel', // not too sure about this bit
          fields: [{name: 'childId', type: 'string'}]
      });
  
  </pre>
  
  <p>with a data store:</p>
  
  <pre>
  
      Ext.regStore('ParentModelStore', {
          model: 'ParentModel',
          autoLoad:true
      });
  
  </pre>
  
  <p>I'm using the following template which gets me the parent information, but I can't get the child data from it:</p>
  
  <pre>
  
      myapp.views.ParentView = Ext.extend(Ext.Panel, {
          layout: 'card',
  
          initComponent: function() {
              this.list = new Ext.List({
                  itemTpl: new Ext.XTemplate(
                      '&lt;tpl for=".">',
                          '&lt;div>',
                              '{parentId}', // this works fine
                          '&lt;/div>',
                          '&lt;tpl for="children.child">', // this doesn't work
                                {childId}
                          '&lt;/tpl>',
                      '&lt;/tpl>',
                  ),
                  store: 'ParentStore',
              });
  
              this.listpanel = new Ext.Panel({
                  layout: 'fit',
                  items: this.list,
              });
  
              this.items = this.listpanel;
  
              myapp.views.ParentView.superclass.initComponent.apply(this, arguments);
          },
  
      });
  
      Ext.reg('ParentView', myapp.views.ParentView);
  
  </pre>
  
  <p>What I'm struggling with is the fact that both the "child" and "parent" elements are surrounded by another element, "children" and "parents" respectively.</p>
  
  <p>Any help much appreciated.</p>
  
  <p>Thanks in advance,</p>
  
  <p>Philip</p>
  
  <p>PS If I remove the outer "children" wrapping element and just leave the inner "child" element (and change "children.child" to "child" in the model definition) the code works fine. </p>
  
  <p>PPS I'm answering my own question:</p>
  
  <p>Doh! I forgot to add the "children" element to the ParentModel's fields.</p>
  
  <p>It should be as follows (note: I didn't need to specify the 'hasMany' or 'associations' elements - not too sure why this is or what is the benefit of including them):</p>
  
  <pre>
  
      Ext.regModel("ParentModel", {
          fields: [
              {name: 'parentId', type: 'string'},
              {name: 'children'} // VERY IMPORTANT TO ADD THIS FIELD
          ],
  
          proxy: {
              type: 'ajax',
              url : 'models.json',
              reader: {
                  type: 'json',
                  root: 'parents.parent' // this works fine
              }
          }
      });
  
      Ext.regModel('ChildrenModel', {
          fields: [{name: 'childId', type: 'string'}]
      });
  </pre>
  
  <p>The template works fine too:</p>
  
  <pre>
  
      '&lt;tpl for="children.child">', // this syntax works too.
            {childId}
      '&lt;/tpl>',
  
  </pre>