How to get particular data from nested arrays using .map or flatmap in angular2/typescript

Question

I have following json,

{   "damages": {        "regions": [{
                "name": "External Damages",
                "totalEstimatedCost": "$ 0.00",
                "damageDetails": [{
                    "areaDes": "FRONT Hood",
                    "type": "Prev Repair",
                    "desc": "Acceptable",
                    "estimate": "$ 0.00",
                    "isClickable": true,
                    "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                    "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                    "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                }]          },          {
                "name": "Other Damages",
                "totalEstimatedCost": "$ 0.00",
                "damageDetails": [{
                        "areaDes": "FRONT Front Bumper Cover",
                        "type": "Prev Repair",
                        "desc": "Acceptable",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "INT OPT Gas",
                        "type": "Empty",
                        "desc": "Unacceptable",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "LF DR L \"A\" Pillar",
                        "type": "Prev Repair (Structure)",
                        "desc": "Substd Repair",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "LF DR LF Door",
                        "type": "Prev Repair",
                        "desc": "Acceptable",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "L FEND LF Fender",
                        "type": "Prev Repair",
                        "desc": "Buffable",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "REAR Rear Bumper Cover",
                        "type": "Chipped",
                        "desc": "2",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "RF DR RF Door",
                        "type": "Chipped",
                        "desc": "3",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "R QTR R Qtr Panel",
                        "type": "Prev Repair",
                        "desc": "Acceptable",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    },
                    {
                        "areaDes": "RR DR RR Door",
                        "type": "Chipped",
                        "desc": "3",
                        "estimate": "$ 0.00",
                        "isClickable": true,
                        "regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
                        "midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
                        "thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
                    }
                ]           }       ],      "totalDamages": 10,         "totalCost": "$ 0.00"   } }

In the above json i need all regularUrls in one array, how to do that using map in angular2/typescript/rxjs.

Currently i am using two for loops or I can use three .maps for to get the regularUrls in one array.

How to solve this by using rxjs or typescript in angular2

Any solutions will be help full, Thank you

kumar, please accept and upvote :)

Muhammad Usman
– Muhammad Usman

2017-10-30 07:47:40 +00:00
Commented Oct 30, 2017 at 7:47 — Muhammad Usman
– Muhammad Usman, Commented Oct 30, 2017 at 7:47
Actually, you don't need rxjs

Héctor Valls
– Héctor Valls

2017-10-30 07:49:32 +00:00
Commented Oct 30, 2017 at 7:49 — Héctor Valls
– Héctor Valls, Commented Oct 30, 2017 at 7:49

Muhammad Usman · Accepted Answer · 2017-10-30 07:42:19Z

Try this

 var data = { 	"damages": { 		"regions": [{
    				"name": "External Damages",
    				"totalEstimatedCost": "$ 0.00",
    				"damageDetails": [{
    					"areaDes": "FRONT Hood",
    					"type": "Prev Repair",
    					"desc": "Acceptable",
    					"estimate": "$ 0.00",
    					"isClickable": true,
    					"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    					"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    					"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    				}] 			}, 			{
    				"name": "Other Damages",
    				"totalEstimatedCost": "$ 0.00",
    				"damageDetails": [{
    						"areaDes": "FRONT Front Bumper Cover",
    						"type": "Prev Repair",
    						"desc": "Acceptable",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "INT OPT Gas",
    						"type": "Empty",
    						"desc": "Unacceptable",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "LF DR L \"A\" Pillar",
    						"type": "Prev Repair (Structure)",
    						"desc": "Substd Repair",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "LF DR LF Door",
    						"type": "Prev Repair",
    						"desc": "Acceptable",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "L FEND LF Fender",
    						"type": "Prev Repair",
    						"desc": "Buffable",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "REAR Rear Bumper Cover",
    						"type": "Chipped",
    						"desc": "2",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "RF DR RF Door",
    						"type": "Chipped",
    						"desc": "3",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "R QTR R Qtr Panel",
    						"type": "Prev Repair",
    						"desc": "Acceptable",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					},
    					{
    						"areaDes": "RR DR RR Door",
    						"type": "Chipped",
    						"desc": "3",
    						"estimate": "$ 0.00",
    						"isClickable": true,
    						"regularUrl": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original.jpg",
    						"midSizedPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_lb.jpg",
    						"thumbNailPath": "https://adesa.test2.kar-media.com/display.php?img=283509519_d_ee9339f0-d9d9-48cb-ab15-66831f95dcd7-Original_th.jpg"
    					}
    				] 			} 		], 		"totalDamages": 10, 		"totalCost": "$ 0.00" 	} }
data.damages.regions.filter(item=>item.hasOwnProperty('damageDetails'))
                .map((item, i) => item.damageDetails.map((it,j)=> console.log(it.regularUrl)))

Ibraheem Al-Saady · Accepted Answer · 2017-10-30 07:53:44Z

1

you can do something like that

let regularUrls = []; 

damages.regions.filter(region => region.hasOwnProperty('damageDetails') && region.damageDetails.length).map(region => {
    regularUrls = regularUrls.concat(region.damageDetails.map(damage => damage.regularUrl));
});

the regularUrls array will have all the regular Urls.

Here is a fiddle to test it http://jsfiddle.net/IbraheemAlSaady/xtr81m74/

answered Oct 30, 2017 at 7:53

Ibraheem Al-Saady

8743 gold badges14 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to get particular data from nested arrays using .map or flatmap in angular2/typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related