CODEWITHSUNDEEP
jsonsencha-touch-2store
Dar-Jee
Dar-Jee

Reputation: 183

Sencha Touch 2.2 load store from JSON, data goes to raw column

I'm trying to load a store from JSON received from webservices. But all the data from the JSON goes under the 'raw' column of the items in the store... I can't figure out why, my code seems correct. Any help is welcome.

My Model :

Ext.define('App.model.Node', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'id', type: 'int' }, 
            { name: 'version', type: 'int' }, 
            { name: 'user_id', type: 'int' }, 
            { name: 'tstamp', type: 'date' }, 
            { name: 'changeset_id', type: 'int' }, 
            { name: 'tags', type: 'string' }, 
            { name: 'geom', type: 'string'}
        ],

        idProperty: 'id'
    }
});

My Store :

Ext.define('App.store.NodeStore', {
    extend: 'Ext.data.Store',
    xtype: 'nodestore',
    requires: [
        'Ext.data.proxy.Rest'
    ],
    config: {
        model: 'App.model.Node',
        storeId: 'nodeStore',
        autoLoad: true,
        proxy: {
            type:'rest',
            url:'http://localhost/server/nodes',
            reader: {
                type:'json',
                rootProperty: 'nodes'
            },
            noCache: false,
            limitParam: false,
            headers: {                
                'Accept' : 'application/json'                 
            }
        }
    }
});

My JSON :

{
    "nodes": [
        {
            "id": "454467",
            "version": 6,
            "user_id": 52015,
            "tstamp": "2008-12-27 21:38:45",
            "changeset_id": "634766",
            "tags": "",
            "geom": "0101000020E6100000409CD1A0B29321405455682096804740"
        },
        {
            "id": "454468",
            "version": 8,
            "user_id": 52015,
            "tstamp": "2009-12-23 20:47:15",
            "changeset_id": "3437205",
            "tags": "",
            "geom": "0101000020E6100000357C0BEBC69321409EC02ACD9C804740"
        }, 
        {
            "id": "454469",
            "version": 7,
            "user_id": 52015,
            "tstamp": "2009-12-23 20:47:15",
            "changeset_id": "3437205",
            "tags": "",
            "geom": "0101000020E6100000347914F8D4932140B8BBBD5AA4804740"
        }
    ]
}

And when I do a 

var nodeStore = Ext.getStore('nodeStore');
nodeStore.load();
console.log(nodeStore.getData());

we can see the following object, with my data in the raw column under items...

Data in the store

Upvotes: 0

Views: 5468

Answers (1)

Dar-Jee
Dar-Jee

Reputation: 183

I figured it out, my code is correct and the only thing missing is a callback in the load() function : 

nodeStore.load({
    callback: function(records, operation, success) {
        console.log(records);
        console.log(nodeStore.getCount());
        nodeStore.each(function(element) {
            console.log(element.data.id);
        });
    },
    scope: this,
});

The problem was I was trying to access the store before it loaded the data. Now I'm waiting that all the data is loaded to access it, and it works.

Upvotes: 1

Related Questions