Extracting Nested JSON from Store Record?

Question

I'm working from an example based on the comments in the Sencha documentation. I am able to extract the top-level information (id,name,last) but I can't figure out how to extract the products from each record. I was hoping that it would be as simple as requesting that part of the record but aProduct is always null:

var name = aRecord.get('name'); // Good
var lastName = aRecord.get('last'); // Good
var aProduct = aRecord.get('products'); // Null

I'm including all the code.

JSON:

[
    {
        "id": 1,
        "name": "Ed",
        "last": "Bar",

        "products": [
            {
                "short_name": "Product1",
                "name": "Another Product"
            },
            {
                "short_name": "Product2",
                "name": "Second Product"
            }
        ]

    },
    {
        "id": 2,
        "name": "Foo",
        "last": "Bar",

        "products": [
            {
                "short_name": "Product1",
                "name": "Another Product"
            },
            {
                "short_name": "Product2",
                "name": "Second Product"
            }
        ]

    }
]

app.js:

Ext.application({
    name: 'SenchaFiddle',
    models: ['Product', 'User'],
    stores: ['UserStore'],
    views: [],
    controllers: [],

    launch: function () {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Test...'
        });

        var userStore = Ext.getStore('UserStore');

        console.log(userStore);
        console.log('--- Data ---');
        userStore.each(function (val) {
            console.log(val.get('name'));
        });
        console.log('--- Done ---');
        userStore.load({

            params: {},
            scope: this,
            callback: function (records, operation, success) {

                console.log("status=" + success);
                console.log("Number Records=" + records.length);
                for (var i = 0; i < records.length; i++) {
                    var aRecord = records[i];
                    console.log(aRecord);
                    var name = aRecord.get('name');
                    var lastName = aRecord.get('last');
                    var productList = aRecord.get('products');
                    console.log('(Short, First, Last)=(' + productList + ',' + name + ',' + lastName + ')');
                    for (var j=0; j<productList.length; j++) {
                      console.log(productList[j].name + " / " + productList[j].short_name);
                   }
                }
            }
        });
    }
});

User Model:

Ext.define('SenchaFiddle.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'id',   type: 'int'},
            {name: 'name', type: 'string'},
            {name: 'last', type: 'string'}
        ],
        // we can use the hasMany shortcut on the model to create a hasMany association
        hasMany: {model: 'Product', name: 'products', "associationKey": 'products'}
    }
});

Product Model:

Ext.define('SenchaFiddle.model.Product', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'id',      type: 'int'},
            {name: 'user_id', type: 'int'},
            {name: 'short_name', type: 'string'},
            {name: 'name',    type: 'string'}
        ]
    }
});

User Store:

Ext.define('SenchaFiddle.store.UserStore', {
    extend: 'Ext.data.Store',

    config: {
        model: 'SenchaFiddle.model.User',
        autoLoad: true,

        proxy: {
            type: 'ajax',
            url: 'users.json',
            reader: {
                type: 'json'
              //rootProperty: 'users'
            }

        }
    },
    load: function () {
        this.callParent(arguments);
        console.log("User Store Loaded\n");
    }
});

Answer 1

Nice work, you are very close!

Add a products field to your user model:

    fields: ['products',
        {name: 'id',   type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'last', type: 'string'}
    ]

Stick w/Sencha, the whole package can be a little overwhelming and admittedly confusing (even after a couple years of use) but it definitely get better.

Brad