Bind Complex JSON object to html table

Aniket Narvankar

6y1.6k

I am consuming a web api in my application from the web api I am getting response in following format

"item1": {

"Data": {

"xyz": {

"total": 23,

"used": 6,

"available": 17

"abc": {

"total": 21,

"used": 5,

"available": 16

"def": {

"total": 18,

"used": 5,

"available": 13

"code": "an"

}

I want to bind this to html table in following format

Name	Details	total	used	available	code
item1	xyz	23	6	17	an
item1	abc	21	5	16	an
item1	def	18	5	13	an

Kindly help on this as I am not understanding how to access inside properties,for example inside item1 there is Data and code inside data there are three objects xyz,abc,def and each have 3 properties total,used,available whic I have to display in table. And code property value is an

Kindly guide me on this

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Arvind Kushwaha6y ago
Accepted answer
Hi Anket,

Please refer the following article

https://stackoverflow.com/questions/34907982/looping-through-json-data-to-generate-html
Arvind Kushwaha6y ago
Hi Aniket,

There are two ways.

If your both item item1 & item2 are present in array then you can loop it using for loop.

If you want to display them seperately simply change the object name in for loop from item1 to item2.data.length or vice versa.
Aniket Narvankar6y ago
"item1": {
"Data": {
"xyz": {
"total": 23,
"used": 6,
"available": 17
},
"abc": {
"total": 21,
"used": 5,
"available": 16
},
"def": {
"total": 18,
"used": 5,
"available": 13
},
},
"code": "an"
},

"item2": {
"Data": {
"xyz": {
"total": 23,
"used": 6,
"available": 17
},
"abc": {
"total": 21,
"used": 5,
"available": 16
},
"def": {
"total": 18,
"used": 5,
"available": 13
},
},
"code": "an"
}

I have one more doubt,if there are two objects item1 and item2,when I sent name as item1 then item1 details should be displayed in table,when I sent name as item2 then item2 details should be displayed in table
How to do this filteration.