ExtJS 6 Rest Proxy where JSON Data Object is ID - json

Question

I'm hoping someone can guide me on how to deal with this json data structure.
Here's an example of that: (I have zero control of this data)
{
"1": {
"name": "thing 01",
"attributes": {
"color": "red",
"brand": "ACME"
}
},
"2": {
"name": "thing 02",
"attributes": {
"color": "blue",
"brand": "ACME"
}
}
}
So I'm confused about how to get the records using the reader
Ext.define('MyApp.model.Thing', {
extend: 'Ext.data.Model'
fields: [
{ name: 'name' },
{ name: 'attributes', type: 'auto' }
],
proxy: {
type: 'rest',
url: 'http://example.com/api/things',
reader: {
type: 'json',
rootProperty: ??? // <--- How should this work?
}
}
});
I've wondered if there's a way to do something like...
rootProperty: '[id]'
Also is there a way to specify the ID when it is the data object? Maybe somehow using the idProperty config on the Model?
Should I use the reader.format method? That would seem a little gross...
Any ideas are apreciated. Thanks!

Answer 1

Write a custom reader class:
Ext.define('MyReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.myreader',
config: {
transform: function (data) {
var ret = [],
key, o;
for (key in data) {
o = data[key];
o.id = key;
ret.push(o);
}
return ret;
}
}
});
Ext.define('Thing', {
extend: 'Ext.data.Model',
fields: ['name', 'attribute'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'myreader'
}
}
});
Example fiddle.

Answer 2

Your EXACT question is already answered here.
You should implement a custom reader and override the getResponseData method.
Ext.define('MyReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.myreader',
getResponseData: function(response) {
var data = this.callParent([response]);
//do stuff here
return data;
}
});