CODEWITHSUNDEEP
jsonextjsextjs4jsonp
Gihan Lasita
Gihan Lasita

Reputation: 3055

how to configure extjs reader to read this json?

I've configured extjs store to load data from useragentstring.com api, this api return data like this

{"agent_type":"Browser","agent_name":"Opera","agent_version":"9.70","os_type":"Linux","os_name":"Linux","os_versionName":"","os_versionNumber":"","os_producer":"","os_producerURL":"","linux_distibution":"Null","agent_language":"English - United States","agent_languageTag":"en-us"}

Ext.define('Oms.model.Userinfo', {
    extend  : 'Ext.data.Model',
    fields  : ['agent_type', 'agent_name', 'agent_version', 'os_type', 'os_name']
});

Ext.define('Oms.store.Userinfo', {
    extend      : 'Ext.data.Store',
    model       : 'Oms.model.Userinfo',
    proxy: {
        type    : 'jsonp',
        reader  : {
            type: 'json',
            root: ''
        }       
    }
});

this store throws a error

enter image description here

maybe this happen because there is no root in this json ?

any idea how to read this output and load store correctly?

Regards

Upvotes: 2

Views: 9081

Answers (2)

It Grunt
It Grunt

Reputation: 3378

You need to restructure your json object that is returned to look more like:

{
    root:  {     
      "agent_type":"Browser",
      "agent_name":"Opera",
      "agent_version":"9.70",
      "os_type":"Linux",
      "os_name":"Linux",
      "os_versionName":"",
      "os_versionNumber":"",
      "os_producer":"",
      "os_producerURL":"",
      "linux_distibution":"Null",
      "agent_language":"English - United States",
      "agent_languageTag":"en-us"
   }
}

When you define the root of your JsonReader, you are telling the reader where in the object it should look. This is done so that you can return multiple objects inside your JSON for different stores on the same request.

As a side note you may want to watch how you handle Null values from your PHP... You may find that you will need to handle replacing "Null" from the backend as I believe ExtJS will treat "Null" as a string.

Upvotes: -1

Krzysztof
Krzysztof

Reputation: 16130

It works for me when I don't set root or when I set it to undefined.

You may also extend Ext.data.reader.Json to adjust response to your needs. Example:

Ext.define('Ext.data.reader.JsonPWithoutRoot', {
    extend: 'Ext.data.reader.Json',
    read: function(response) {
        return this.callParent([ { root: response } ]);
    },
    root: 'root'
});

And then in proxy define it like this:

proxy: {
    type: 'jsonp',
    callbackKey: 'method',
    url: 'http://localhost/ext4/data3.php',
    reader: Ext.create('Ext.data.reader.JsonPWithoutRoot', {})
}

Upvotes: 5

Related Questions