PDA

View Full Version : Grab deep nested data from JSON



ArcherOrania
5 Mar 2014, 12:56 AM
Hello evryone!

Please help me with my problem. I have hierarchical nested data simulates calendar structure in JSON file. I can read years in one combobox but can't read months in second combobox and days as columns in grid panel. I can traverse over JSON tree with auto generated methods. I try mapping property in model but it not working. When remove from JSON arrays data wrapped by [] mapping property works but stop working traverse over JSON tree. How I can read nested days data in columns gird.

My JSON structure:


{ 'success': true,
"calendars": [
{
"id": 123,
"year": 2014,
"months": [
{
"id": 50,
"monthnumber": 1,
"monthname": "Yanuary 2014",
"month_days": [
{
"id" : 20,
"daynumber" : 1,
"dayname": "Monday",

"day_events" : [{
"id": 1000,
"name": "MacBook Pro"
}]
},
{
"id" : 21,
"daynumber" : 2,
"dayname": "Thursday",

"day_events" : [{
"id": 1001,
"name": "iPhone"
}]
}
]
},{
"id": 500,
"monthnumber": 2,
"monthname": "Febru 2014",
"month_days": [
{
"id" : 2014,
"daynumber" : 1,
"dayname": "Monday",

"day_events" : [{
"id": 100120,
"name": "MacBook Pro"
}]
},
{
"id" : 2231,
"daynumber" : 2,
"dayname": "Thursday",

"day_events" : [{
"id": 107701,
"name": "iPhone"
}]
}
]
}
]
},
{
"id": 456,
"year": 2013,
"months": [
{
"id": 50,
"monthnumber": 1,
"monthname": "Yanuary 2013",
"month_days": [
{
"id" : 20,
"daynumber" : 10,
"dayname": "Sunday",
"day_events" : [{
"id": 1005,
"name": "asd 2013"
}]
},
{
"id" : 21,
"daynumber" : 20,
"dayname": "Friday",
"day_events" : [{
"id": 1008,
"name": "cvbcv"
}]
}
]
}
]
}
]
}

My Models:


Ext.define('EmploCalendar.model.Year', {
extend: 'Ext.data.Model',

requires:[
'EmploCalendar.model.Month'
],

fields:[
{name: 'id', type: 'int'},
{name: 'year', type: 'int'},
{name: 'months', type: 'auto'},
{name: 'monthnumber', type: 'int'}
],

hasMany:[
{
name: 'months',
model: 'EmploCalendar.model.Month'
}
],

proxy: {
type: 'ajax',
url: '/EmploCalendar/resources/data/calendars.json',

reader: {
type: 'json',
root: 'calendars',
successProperty: 'success'
}
}
});


Ext.define("EmploCalendar.model.Month", {
extend: 'Ext.data.Model',

requires:[
'EmploCalendar.model.Day'
],

fields: [
{name: 'id'},
{name: 'monthnumber'},
{name: 'monthname'}
],

hasMany : {model: 'EmploCalendar.model.Day', name: 'dayItems', associationKey: 'month_days'},
belongsTo: 'Year',

proxy: {
type: 'ajax',
url: '/EmploCalendar/resources/data/calendars.json',

reader: {
type: 'json',
root: 'calendars',
successProperty: 'success'
}
}
});


Ext.define("EmploCalendar.model.Day", {
extend: 'Ext.data.Model',

requires:[
'EmploCalendar.model.DayEvent'
],

fields: [
'id', 'daynumber', 'dayname'
],

hasMany : {model: 'EmploCalendar.model.DayEvent', name: 'dayEvent', associationKey: 'day_events'},
belongsTo: 'Month'

});


Ext.define("EmploCalendar.model.DayEvent", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],

hasMany: 'Day'
});

My Stores:


Ext.define('EmploCalendar.store.Years', {
extend: 'Ext.data.Store',
requires: 'EmploCalendar.model.Year',
model: 'EmploCalendar.model.Year',

autoLoad: 'true'
});


Ext.define('EmploCalendar.store.Months', {
extend: 'Ext.data.Store',
requires: 'EmploCalendar.model.Month',
model: 'EmploCalendar.model.Month',

autoLoad: 'true'
});

My Views:


Ext.define('EmploCalendar.view.YearMonth', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.yearmonth',
store: 'Years'

});


Ext.define('EmploCalendar.view.Month', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.month',
store: 'Months'
});

And my viewport:


Ext.define('EmploCalendar.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',

requires: [

'EmploCalendar.view.EmploList',
'EmploCalendar.view.YearMonth',
'EmploCalendar.view.MainCalendar',
'EmploCalendar.view.Month',
'EmploCalendar.view.MainCalendar'
],

initComponent: function() {

this.items = {

xtype: 'panel',

dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 100,
items: [{
xtype: 'yearmonth',
width: 150,
displayField: 'year',
valueField: 'id',
action: 'selectyear',
},{
xtype: 'month',
width: 150,
displayField: 'name',
valueField: 'id',
action: 'selectmonth',
id: 'kwaskombo'
}]
}],
};
this.callParent();
}
});

scottmartin
5 Mar 2014, 7:06 AM
Here a quick example of accessing nested JSON data:
https://fiddle.sencha.com/#fiddle/1jp