EXTJS 5.1 VERY SIMPLE TreeStore from JSON - extjs

Question

I have looked around but I still don't understand how to create treestore properly.
I have this very simple json that I get from a server:
{
"Results": [
{
"name": "John",
"age": 23,
"cars": [
{
"name": "Clio",
"brand": "Renault"
},
{
"name": "Class S",
"brand": "Mercedes"
}
]
},
{
"name": "Michel",
"age": 42,
"cars": [
{
"name": "Qashqai",
"brand": "Nissan"
}
]
}
]
}
I have my two models:
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [ 'name', 'age']
});
Ext.define('Car', {
extend: 'Ext.data.Model',
fields: [ 'name', 'brand']
});
Now I know that I have to create a tree store, but in all example that I have seen, there is always a "children" property in the json, which I don't have.
How to create a tree store with the following json?
Thanks a lot in advance :) !!

Answer 1

You could always build the correct formatted object for the data like the following:
Ext.application({
name: 'Fiddle',
launch: function () {
var myTreeData = {
"Results": [{
"name": "John",
"age": 23,
"cars": [{
"name": "Clio",
"brand": "Renault"
}, {
"name": "Class S",
"brand": "Mercedes"
}]
}, {
"name": "Michel",
"age": 42,
"cars": [{
"name": "Qashqai",
"brand": "Nissan"
}]
}]
},
modifiedData = {
expanded: true,
children: []
};
myTreeData.Results.forEach(function (result) {
var newChildrenArray = [];
result.cars.forEach(function (car) {
var newChild = {
text: car.name,
leaf: true
};
newChildrenArray.push(newChild);
});
var person = {
text: result.name,
leaf: (newChildrenArray.length > 0 ? false : true),
children: newChildrenArray
};
modifiedData.children.push(person);
});
var store = Ext.create('Ext.data.TreeStore', {
root: modifiedData
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
}
});
Demo here: https://fiddle.sencha.com/#fiddle/j05