ExtJS Create Multiple Rows in Gird When Using Nested JSON - json

Question

I am using Ext JS 6, trying to get a grid to have a row for each area, country, and city. I have no control over my backend and the format of my JSON (see below). I think I have my store correct (see below). I am wondering what I need to do in order to display a record for each nested item in the grid. Ext JS is determined to only have one record in this grid. My real question is what should my model look like?
JSON
{
"locations" : [
{
"type" : "area",
"name" : "Middle East",
"country" : [
{
"type" : "country",
"name" : "Afghanistan",
"city": [
{
"type" : "city",
"name" : "Bagram",
"data" : [
{
"data1" : 5,
"data2" : 10
},
{
"data1" : 2,
"data2" : 9
}
]
},
{
"type" : "city",
"name" : "Kabul",
"data" : [
{
"data1" : 3,
"data2" : 7
},
{
"data1" : 6,
"data2" : 2
}
]
}
]
}
]
}
]
}
Store
Ext.define('App.store.Locations', {
extend: 'Ext.data.Store',
model: 'App.model.Location',
proxy: {
type: 'ajax',
url: 'data/location.json',
reader: {
type: 'json',
rootProperty: 'locations'
}
},
autoLoad: true
});

Answer 1

I think you have to use Ext.data.reader.Reader.transform(), like this:
Ext.define('App.store.Locations', {
extend: 'Ext.data.Store',
model: 'App.model.Location',
proxy: {
type: 'ajax',
url: 'data/location.json',
reader: {
type: 'json',
rootProperty: 'locations',
transform: {
fn: function(rawData) {
//Your parse data logic here
var data = [],
locationTypes = ['area', 'country', 'city'],
parseData = function(dataPart) {
data.push({
type: dataPart['type'],
name: dataPart['name']
});
for(var i = 0; i < locationTypes.length; ++i) {
if(Object.prototype.hasOwnProperty.call(dataPart, locationTypes[i])) {
for(var j = 0; j < dataPart[locationTypes[i]].length; ++j) {
parseData(dataPart[locationTypes[i]][j]);
}
}
}
};
for(var i = 0; i < rawData.length; ++i) {
parseData(rawData['locations'][i]);
}
return (data);
}
}
}
},
autoLoad: true
});
Check this working fiddle