PDA

View Full Version : JsonStore



dean.vaughan
13 Feb 2013, 6:04 AM
I'm having problems with using the ExtJS reader to pass my data i have created a JsonStore like so:


Ext.define('app.store.Portfolios', {
extend: 'Ext.data.JsonStore',
storeId: 'portfoliosStore',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'totalcalcfield', type: 'string'}
],
constructor: function(config) {
config = config || {};

config.proxy = {
type: 'ajax',
url : '/services',
reader: {
type: 'json'
}
}

this.callParent([config]);
}
});



this is the sample response from the server.


{
"test1": {"id":"263939","name":"test1","items":[],"type":"1","totalcalcfield":"LAST"},
"test2": {"id":"172331","name":"test2","items":[],"type":"1","totalcalcfield":"LAST"}
}


if anyone could point me in the right direction it would be appreciated!

scottmartin
13 Feb 2013, 11:36 AM
Look at the root property for your reader



// root: 'items'
{
'items': [
{
'name': 'Lisa',
'email': 'lisa@simpsons.com',
'change': 80
},
{
'name': 'Bart',
'email': 'bart@simpsons.com',
'change': 20
},
{
'name': 'Homer',
'email': 'home@simpsons.com',
'change': 23
},
{
'name': 'Marge',
'email': 'marge@simpsons.com',
'change': -11
}
]
}


Scott.

dean.vaughan
13 Feb 2013, 11:45 AM
Hi,

The example JSON output you have used is an array of objects. However the JSON output i have to work with is an object. it has no root property nor is it an array of objects.

can i create my own reader to iterate through the object?

scottmartin
13 Feb 2013, 1:12 PM
Use field mapping in your store:



fields: [{
name : 'id',
mapping : 'test1.id'
}]


Scott.

dean.vaughan
14 Feb 2013, 12:40 AM
i can't use a mapping like that because the key name is dynamic e.g


fields: [{ name : 'id', mapping : 'variablename.id'}]

scottmartin
14 Feb 2013, 5:25 AM
Whoever is in charge of the json does not like developers ;)
You would need a root in this case.

Do you have any control over the json?

Scott

dean.vaughan
14 Feb 2013, 5:40 AM
unfortunately i can't change the API's responses, i guess i have no choice but to build my own proxy reader :(

scottmartin
14 Feb 2013, 6:18 AM
You could always access the data from the raw data of store1 to populate store2



Ext.define('Model', {
extend: 'Ext.data.Model',

fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'totalcalcfield', type: 'string'}
]

});

Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
model: 'Model',
proxy: {
type: 'ajax',
url : 'user-data.json',
reader:
{
type : 'json',
model: 'Model'
}
}
});

store.load();

console.log(store.data);

});


// your json


{
"test1": {
"id": "263939",
"name": "test1",
"items": [],
"type": "1",
"totalcalcfield": "LAST"
},
"test2": {
"id": "172331",
"name": "test2",
"items": [],
"type": "1",
"totalcalcfield": "LAST"
}
}


// console output: items[0].raw


raw: Object
test1: Object
id: "263939"
items: Array[0]
name: "test1"
totalcalcfield: "LAST"
type: "1"
test2: Object
id: "172331"
items: Array[0]
name: "test2"
totalcalcfield: "LAST"
type: "1"


Scott.

dean.vaughan
14 Feb 2013, 7:46 AM
Thanks for your help, i went with the approach of creating my own proxy reader. here is the code incase someone else comes across this issue.


Ext.define("App.ext.data.reader.JsonObject", { extend: 'Ext.data.reader.Json',


getResponseData: function(response) {
var data, error;

try {
data = Ext.decode(response.responseText);
var dataObj = {};
dataObj[this.root] = [];

for (var i in data) {
dataObj[this.root].push(data[i])
}

return this.readRecords(dataObj);
} catch (ex) {
error = new Ext.data.ResultSet({
total : 0,
count : 0,
records: [],
success: false,
message: ex.message
});


this.fireEvent('exception', this, response, error);


Ext.Logger.warn('Unable to parse the JSON returned by the server');


return error;
}
}
});

scottmartin
14 Feb 2013, 7:51 AM
Very nice .. thanks for sharing.

Scott.