Nested JSON cant load store from models - get first level only , raw shows values

[busaware1]

Hi,
I have a nested set of JSON objects which I am retrieving via JSONP into a store.
I have am unable to load anything but the first level of JSON - any nested objects do not get loaded.
When I inspect the record the 'raw' data shows the nested values successfully but the record does not - the data doesnt look like it is being loaded into the models successfully for the nested data - no errors coming up either.
The JSON is valid through JSONLint (when taking out the callback name).
I have attached a PDF of the chrome inspector of the returned record showing the record top level items ok but no nested level items but they are in the 'raw' - so data coming through just not loading into Sencha models.
NOTE: I've tried with and without 'association keys' - doesn't seem to make a difference either.
If anyone can provide some guidance on how to achieve this that would be great.

thx

Models are:

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'UserName', type: 'string' },
            { name: 'Password', type: 'string' },
            { name: 'SessionId', type: 'string' },
            { name: 'FirstName', type: 'string' },
            { name: 'LastName', type: 'string' },
           // { name: 'Message', type: 'string' },
            { name: 'IsAuthenticated', type: 'boolean' }
            ],
        hasMany: { model: 'MyApp.model.Role', name: 'roles', associationKey: 'Roles' }
       , hasMany: { model: 'MyApp.model.Message', name: 'messages', associationKey: 'Messages' }
    }
});
Ext.define('MyApp.model.Role', {
    extend: 'Ext.data.Model',


    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'RoleCode', type: 'string' },
            { name: 'Description', type: 'string' },
            ],
        belongsTo: 'MyApp.model.User'
    }
});
Ext.define('MyApp.model.Message', {
    extend: 'Ext.data.Model',


    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'IsError', type: 'boolean' },
            { name: 'MessageStr', type: 'string' },
            ],
        belongsTo: 'MyApp.model.User'
    }
});

And a store as follows:

Ext.define('MyApp.store.User', {
    extend: 'Ext.data.Store',
    config: {
        model: 'MyApp.model.User',
        storeId: 'UserStore',
        autoload: false,
        proxy: {
            type: 'jsonp',
            url: 'Data.json', // see JSONP sample file inline below ....
            reader: {
                type: 'json'
                 , rootProperty: 'Data'
            }
        },
        listeners: {
            'load': function (message) {
                console.log('2- user store load fired');
     }


        }




    }
});

In my controller I have the following code to load the store:

 var userStore = Ext.getStore('UserStore');
userStore.load({
           
            callback: function (records, operation, success) {


                console.log('user store returned');
                console.log(records);
                console.log(operation);
                console.log(success);
},
            scope: this
        });

The sample JSONP I am using from a file 'Data.json' is as follows:

Ext.data.JsonP.callback1("{\"Data\":{\"IsAuthenticated\":true,\"Roles\":[{\"id\":1,\"RoleCode\":\"HMMOBILEUSER\",\"Description\":\"MobileUser\"},{\"id\":2,\"RoleCode\":\"HMMOBILEMGR\",\"Description\":\"MobileMgr\"}],\"SessionId\":null,\"Messages\":[{\"id\":1,\"MessageStr\":\"Access Granted : Login Successful\",\"IsError\":false}],\"id\":1,\"UserName\":\"marys\",\"Password\":\"*****\",\"FirstName\":\"Mary\",\"LastName\":\"Smith\"}}");

[haduki]

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'UserName', type: 'string' },
            { name: 'Password', type: 'string' },
            { name: 'SessionId', type: 'string' },
            { name: 'FirstName', type: 'string' },
            { name: 'LastName', type: 'string' },
           // { name: 'Message', type: 'string' },
            { name: 'IsAuthenticated', type: 'boolean' }
            ],
        hasMany: [{ model: 'MyApp.model.Role', name: 'roles', associationKey: 'Roles' },
               { model: 'MyApp.model.Message', name: 'messages', associationKey: 'Messages' }]
    }
});

callback:function(records,operation, success){
    var user0,user0_role0,user0_message0;
    user0 = records.getAt(0);
    user0_role0 = user0.roles().getAt(0);
    user0_message0 = user0.messages().getAt(0);
    //for each user0 messages
    user0.messages().each(function(message){
         // do something here
    })
}

[JRS]

Did you find a solution to this issue.
I am experiencing similar problem - using HasMany association. I can see the data on the first level, however the second level is empty and the Raw field contains all the data?

If anyone has any idea about why this is happening it would much appreciated.

PS: Didn't want to start a new thread as I believe the problem to be the same

[Tioecomp]

Try to put the field user_id in both Role and Message models, that field is the connection to the models with the User.

[JRS]

Tried adding a link field as suggested - no luck.
I will start another thread with Sencha sample code

[eastlander]

I had the same problem, what worked for me was setting the associationkey to be the same as the property in the JSON. In your case Roles and Messages.

[Tioecomp]

That was what worked for me too.

[JRS]

I'm still struggling with it. Glad to hear it does work. I'll go back to sencha examples to see if I can get those working. Not sure OP - has it working or not.

For now I am using a work around where I manually set
record.data.asocdata = record.raw.asocdata

[chrigil]

I had a very similar issue which I solved by removing the BelongsTo association. It seemed to make sense to me to have this association but upon removing it everything worked as expected.

I'm very new to Sencha Touch so I might be barking up the wrong tree, but for the sake of a 2 minute test on your part, I thought it was worth adding my own experience.

[busaware1]

Hi,

thanks for your post:


var user0,user0_role0,user0_message0; user0 = records.getAt(0);this returns an error e.g. getAt throws an exception as follows:

records BusAwareUtil.js:18

[Class]

• 0: Class
  • _data: Object
  • data: Object
    • FirstName: null
    • IsAuthenticated: false
    • LastName: null
    • Password: null
    • SessionId: null
    • UserName: null
    • id: 1
    • __proto__: Object
  • id: "ext-record-3"
  • internalId: 1
  • messagesStore: Class
  • modified: Object
  • raw: Object
    • FirstName: null
    • IsAuthenticated: false
    • LastName: null
    • Messages: Array[1]
    • Password: null
    • Roles: Array[0]
    • SessionId: null
    • UserName: null
    • id: 1
    • __proto__: Object
  • rolesStore: Class
  • stores: Array[1]
  • __proto__: TemplateClass
• length: 1
• __proto__: Array[0]

BusAwareUtil.js:18
rec getat BusAwareUtil.js:18

• [COLOR=red !important]Uncaught TypeError: Object [object Object] has no method 'getAt' Main.js:84[/COLOR]
  • [COLOR=red !important]userStore.load.callback[/COLOR]Main.js:84
  • [COLOR=red !important]Ext.apply.callback[/COLOR]sencha-touch.js:9751
  • [COLOR=red !important]Ext.define.onProxyLoad[/COLOR]Store.js:1923
  • [COLOR=red !important]Ext.define.processResponse[/COLOR]Server.js:260
  • [COLOR=red !important](anonymous function)[/COLOR]JsonP.js:229
  • [COLOR=red !important]Ext.apply.callback[/COLOR]sencha-touch.js:9751
  • [COLOR=red !important]Ext.define.handleResponse[/COLOR]JsonP.js:262
  • [COLOR=red !important](anonymous function)[/COLOR]sencha-touch.js:3144
  • [COLOR=red !important](anonymous function)[/COLOR]