PDA

View Full Version : How to Display Nested Json data in EXTJS 4 Grids?



elixir1
10 Dec 2013, 9:57 AM
I have nested JSON data

{ "success" : "true", "total":2,

"user" :
{ "id" : 12, "email" : "abc@gmail.com", "course" :

{

"name" : "BESE", "institute" :
[{

"name" : "College 1", "semester" :
{ "number":1, "TCH" : 12, "GPA" : 2.32, "Marks":23.32, "record" :
[ { "subject" : "Algorithms, "CH":2, "GP":4, "Grade": "A+", "Marks":99.1
},
{ "subject" : "Data Structure", "CH":4, "GP":3.5, "Grade": "B+", "Marks":79.1
}
] }
},
{ "name" : "College 2", "semester" :
{ "number":2, "TCH" : 22, "GPA" : 1.32, "Marks":13.32, "record" :
[ { "subject" : "Operating System", "CH":2, "GP":3, "Grade": "C+", "Marks":59.1
},
{ "subject" : "Database Systems", "CH":4, "GP":2.5, "Grade": "C", "Marks":39.1
} ]
}

}]

}

}

}
How do I create my model & view in MVC architecture to display all the fields.
Any suggestion/links/threads will be helpful.

Fredric Berling
10 Dec 2013, 11:28 AM
To consume that Json in a Ext.data.Store using a model definition, you need to flatten things out. The store works with one unique Ext.data.Model at a time.

I can see at least two models in the JSON. (User and Institute?)

You should take a look at the "mapping" config of the Ext.data.field.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Field-cfg-mapping

It lets you describe wher in the json structure you'r fields value is. (using dot notation strings)

elixir1
10 Dec 2013, 10:35 PM
What if I have this kind of hierarchy..

a
b

f
g
h

c
d
e

i
j
k

How to associate this kind of hierarchy ?

elixir1
11 Dec 2013, 3:44 AM
Yup. Got it. Just had to use further Dot notations based on hierarchy.:)

abhinay.jdhv
26 Jan 2014, 10:51 AM
HI friend,

could you please mention how did you achieve it? where did you put dot to access it?

elixir1
2 Feb 2014, 11:08 PM
HI friend,

could you please mention how did you achieve it? where did you put dot to access it?

I took help from this link. I think it will also be helpful to you. There are four ptions in that "Association". Use it according to your need.

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.association.Association