Results 1 to 5 of 5

Thread: Parsing data returned from a service using JSON/XML stores

  1. #1

    Default Answered: Parsing data returned from a service using JSON/XML stores

    Hi All,
    I have a service which returns data which I need to access pro-grammatically or parse using a store.
    My response data is in the below format,


    {
    data:{
    "bootCodeRevision": "B00.013boot", "bootSystemRevision": "02.00.00.013",
    "macAddress": "00:00:00:00:00:00",
    "partNumber";"AABB1122"
    },
    "errorString": "",
    "success": "false",
    "viewModel": {
    "type": "ContainerViewInfo",
    "bindingName": "",
    "name": "",
    "viewModels": [
    {
    "type": "TextViewInfo",
    "bindingName": "dataModel.bootCodeRevision",
    "name": "Boot Code Revision"
    },
    {
    "classType": "TextViewInfo",
    "bindingName": "dataModel.bootSystemRevision",
    "name": "Boot System Revision"
    },
    {
    "type": "TextViewInfo",
    "bindingName": "dataModel.macAddress",
    "name": "MAC Address"
    },
    {
    "type": "TextViewInfo",
    "bindingName": "dataModel.partNumber",
    "name": "Part Number"
    }
    ]
    }
    }

    My model contains three fields: type, bindingName, name.


    I was unable to parse/read the entire data above mentioned using JSON store with root property as 'data'.
    When the root property is 'data' the store instance is not showing the 'viewModel' in store instance's 'data' property, but I could see the entire response data in reader's 'rawData' property and when I try to access, it is saying that the property I'm trying to access is 'undefined'.


    Thanks in advance :-)

  2. So you want the root to be data but be able to get the viewModels array? You need to do a little more work but this works:

    Code:
    Ext.define('MyApp.model.MyModel', {
        extend : 'Ext.data.Model',
    
        fields : [
            'bootCodeRevision',
            'bootSystemRevision',
            'macAddress',
            'partNumber'
        ]
    });
    
    Ext.define('MyApp.store.MyStore', {
        extend : 'Ext.data.Store',
    
        requires : 'MyApp.model.MyModel',
    
        model : 'MyApp.model.MyModel',
        proxy : {
            type   : 'ajax',
            url    : 'data/json.json',
            reader : {
                type : 'json',
                root : 'data'
            }
        },
    
        getViewModelFn : null,
    
        getViewModel : function () {
            var me           = this,
                proxy        = me.getProxy(),
                reader       = proxy.getReader(),
                getViewModel = me.getViewModelFn,
                rawData;
    
            if (!getViewModel) {
                getViewModel = me.getViewModelFn = reader.createAccessor('viewModel.viewModels'); //this is the path to get the data
            }
    
            return (function () {
                rawData = reader.rawData;
    
                return getViewModel(rawData);
            })();
        }
    });
    Oh and here is a test:

    Code:
    new MyApp.store.MyStore({
        autoLoad  : true,
        listeners : {
            load : function (store, recs) {
                var viewModel = store.getViewModel();
    
                console.log(viewModel);
            }
        }
    });

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    So you want the root to be data but be able to get the viewModels array? You need to do a little more work but this works:

    Code:
    Ext.define('MyApp.model.MyModel', {
        extend : 'Ext.data.Model',
    
        fields : [
            'bootCodeRevision',
            'bootSystemRevision',
            'macAddress',
            'partNumber'
        ]
    });
    
    Ext.define('MyApp.store.MyStore', {
        extend : 'Ext.data.Store',
    
        requires : 'MyApp.model.MyModel',
    
        model : 'MyApp.model.MyModel',
        proxy : {
            type   : 'ajax',
            url    : 'data/json.json',
            reader : {
                type : 'json',
                root : 'data'
            }
        },
    
        getViewModelFn : null,
    
        getViewModel : function () {
            var me           = this,
                proxy        = me.getProxy(),
                reader       = proxy.getReader(),
                getViewModel = me.getViewModelFn,
                rawData;
    
            if (!getViewModel) {
                getViewModel = me.getViewModelFn = reader.createAccessor('viewModel.viewModels'); //this is the path to get the data
            }
    
            return (function () {
                rawData = reader.rawData;
    
                return getViewModel(rawData);
            })();
        }
    });
    Oh and here is a test:

    Code:
    new MyApp.store.MyStore({
        autoLoad  : true,
        listeners : {
            load : function (store, recs) {
                var viewModel = store.getViewModel();
    
                console.log(viewModel);
            }
        }
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3

    Default

    Hi mitchellsimoens,

    Thanks for the reply and did it work as expected.

  5. #4

    Default

    Hey mitchell can please explain the necessity to create a accessor for reading the reader's rawdata property?

  6. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    This is the proper way to grab data on the response, this will work the same way for JSON and XML. This is how the framework gets the success and total when you have a root defined.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •