title: Sencha Touch - Accessing Associated-Model Store JSON via Nested Looping
body: <p>I've been lurking on Stack Overflow for quite some time now, and have found quite a number of very helpful answers. Many thanks to the community! I hope to be able to contribute my own helpful answers before too long.</p>
  
  <p>In the meantime, I have another issue I can't figure out. I am using Sencha Touch to create a Web-based phone app and I'm having trouble using a nested loop to iterate through some JSON. I can grab the first level of data, but not the items nested within that first level. There is a somewhat <a href="https://stackoverflow.com/questions/3523733/in-extjs-how-can-you-loop-through-menu-items">related ExtJS thread</a>, but I decided to create my own since ExtJS and Touch diverge in subtle yet important ways. Anyway, here is some code to show where I am:</p>
  
  <p>JSON (truncated - the JSON is PHP/MYSQL-generated, and there are currently actually three sub levels with "title", all of which I can access. It's the sub level "items" through which I can't iterate):</p>
  
  <pre><code>{
  "lists": [
      {
          "title": "Groceries",
          "id": "1",
          "items": [
              {
                  "text": "contact solution - COUPON",
                  "listId": "1",
                  "id": "4",
                  "leaf": "true" 
              },
              {
                  "text": "Falafel (bulk)",
                  "listId": "1",
                  "id": "161",
                  "leaf": "true" 
              },
              {
                  "text": "brita filters",
                  "listId": "1",
                  "id": "166",
                  "leaf": "true" 
              }
          ] 
      } 
  ]
  </code></pre>
  
  <p>}</p>
  
  <p>Store:</p>
  
  <pre><code>var storeItms = new Ext.data.Store({
      model: 'Lists',
      proxy: {
          type: 'ajax',
          method: 'post',
          url : LIST_SRC,
          extraParams: {action: 'gtLstItms'},
          reader: {
              type: 'json',
              root: 'lists'
          }
      }
  });
  </code></pre>
  
  <p>Working Loop:</p>
  
  <pre><code>storeItms.on('load', function(){
      var lstArr = new Array();
      storeItms.each(function(i) {
          var title = i.data.title;
          lstArr.push(i.data.title);
      });
      console.log(lstArr);
  });
  </code></pre>
  
  <p>Non-working Nested Loop:</p>
  
  <pre><code>storeItms.on('load', function(){
      var lstArr = new Array();
      storeItms.each(function(i) {
          var title = i.data.title;
          var id = i.data.id;
          title.items.each(function(l) {
              lstArr.push(l.data.text);
          });
      });
      console.log(lstArr);
  });
  </code></pre>
  
  <p>The non-working nested loop gives me the error "Cannot call method 'each' of undefined", in reference to 'title.items.each...'</p>
  
  <p>I suspect this is because I've not set title to be a key to set up a key:value pair, so it just sees a list of strings...but I'm kind of at a loss.</p>
  
  <p>I should mention that the store is populated via two Models that have been associated with one another. I know that the Store can access everything because I am able to do nested iterating via an XTemplate.</p>
  
  <p>Any help will be much appreciated and hopefully returned to the community in kind before too long!'</p>
  
  <p>-Eric</p>