How to fetch value from nested json in ionic

below is my JSON response and i want to show category name and subcategory name but i can’t understand how to fetch it
“subcategorydetails”: {
“MW-PREPARATORY WORK”: [
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “174”,
“subcategory_name”: “Cleaning the area”,
“subcategory_desc”: “Cleaning the area”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “175”,
“subcategory_name”: “Hacking / application of bond-aid concrete surface”,
“subcategory_desc”: “Hacking / application of bond-aid concrete surface”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “176”,
“subcategory_name”: “Material shifting”,
“subcategory_desc”: “Material shifting”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “177”,
“subcategory_name”: “Lintel casting”,
“subcategory_desc”: “Lintel casting”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “178”,
“subcategory_name”: “Wetting of bricks / blocks”,
“subcategory_desc”: “Wetting of bricks / blocks”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “179”,
“subcategory_name”: “Consider bulk age factor for sand”,
“subcategory_desc”: “Consider bulk age factor for sand”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “180”,
“subcategory_name”: “Approved drawings”,
“subcategory_desc”: “Approved drawings”
},
{
“cat_id”: “29”,
“category_name”: “MW-PREPARATORY WORK”,
“subcat_id”: “181”,
“subcategory_name”: “Adequate material for scaffolding”,
“subcategory_desc”: “Adequate material for scaffolding”
}
],
“MW-BRICK TESTING”: [
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “182”,
“subcategory_name”: “Tolerance allowed +8% up to class 75”,
“subcategory_desc”: “Tolerance allowed +8% up to class 75”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “183”,
“subcategory_name”: “Compressive Strength”,
“subcategory_desc”: “Compressive Strength”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “184”,
“subcategory_name”: “For class up to 75, two test for lot of one lakh bricks and one test for every subsequent two lacs”,
“subcategory_desc”: “For class up to 75, two test for lot of one lakh bricks and one test for every subsequent two lacs”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “185”,
“subcategory_name”: “Water Absorption”,
“subcategory_desc”: “Water Absorption”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “186”,
“subcategory_name”: “The average water absorption”,
“subcategory_desc”: “The average water absorption”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “187”,
“subcategory_name”: “Rating of efflorescence”,
“subcategory_desc”: “Note : Water deposit covering 50% of area but without powdering or flecking of the surface is known as moderate class”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “188”,
“subcategory_name”: “Soaking of Bricks”,
“subcategory_desc”: “Soaking of Bricks”
},
{
“cat_id”: “30”,
“category_name”: “MW-BRICK TESTING”,
“subcat_id”: “189”,
“subcategory_name”: “At regular intervals for a period of not less than 6 hours”,
“subcategory_desc”: “At regular intervals for a period of not less than 6 hours”
}
],
“MW-DURING ACTUAL WORK”: [
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “190”,
“subcategory_name”: “Joint Thickness”,
“subcategory_desc”: “Joint Thickness”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “191”,
“subcategory_name”: “Desired thickness 8 to 10 mm”,
“subcategory_desc”: “Desired thickness 8 to 10 mm”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “192”,
“subcategory_name”: “Mix proportion (1:4 for line out, 1:6 for rest masonry)”,
“subcategory_desc”: “Mix proportion (1:4 for line out, 1:6 for rest masonry)”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “193”,
“subcategory_name”: “Line out”,
“subcategory_desc”: “Line out”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “194”,
“subcategory_name”: “Line, Level, Plumb, Right angle”,
“subcategory_desc”: “Line, Level, Plumb, Right angle”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “195”,
“subcategory_name”: “Opening, cut out size”,
“subcategory_desc”: “Opening, cut out size”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “196”,
“subcategory_name”: “Racking of joints”,
“subcategory_desc”: “Racking of joints”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “197”,
“subcategory_name”: “Height of masonry per day”,
“subcategory_desc”: “Height of masonry per day”
},
{
“cat_id”: “31”,
“category_name”: “MW-DURING ACTUAL WORK”,
“subcat_id”: “198”,
“subcategory_name”: “Top layer insertion of aggregate”,
“subcategory_desc”: “Top layer insertion of aggregate”
}
],
“MW-POST WORK”: [
{
“cat_id”: “32”,
“category_name”: “MW-POST WORK”,
“subcat_id”: “199”,
“subcategory_name”: “Wall surface floor cleaning”,
“subcategory_desc”: “Wall surface floor cleaning”
},
{
“cat_id”: “32”,
“category_name”: “MW-POST WORK”,
“subcat_id”: “200”,
“subcategory_name”: “Date of construction”,
“subcategory_desc”: “Date of construction”
},
{
“cat_id”: “32”,
“category_name”: “MW-POST WORK”,
“subcat_id”: “201”,
“subcategory_name”: “Curing for 7 days”,
“subcategory_desc”: “Curing for 7 days”
}
]
},

1 Like

Look at json.parse. It will convert this string to an object. You will then be able to access the data by index. I use classes and object.assign to make it easier to work with json data as it becomes strongly typed.

can you write some code how to do this

use in type script
console.log(this.subcategorydetails[‘MW-PREPARATORY WORK’][0].category_name) ;
console.log(this.subcategorydetails[‘MW-PREPARATORY WORK’][0].subcategory_name)

and use in html

<p *ngFor="let item of subcategorydetails['MW-PREPARATORY WORK'];"><b>category</b> = {{item.category_name}} <b>subcategory</b> {{item.subcategory_name}}</p>

this is work for me

Please check @pt2609

1 Like