如何使用angular2 / typescript中的.map或flatmap从嵌套数组中获取特定数据

Question

我跟随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"   } }

在上面的json中我需要一个数组中的所有regularUrl s，如何使用angular2 / typescript / rxjs中的map。

目前我正在使用两个for循环，或者我可以使用三个.maps来将regularUrls放在一个数组中。

如何在angular2

中使用rxjs或typescript来解决这个问题

任何解决方案都会有所帮助，谢谢

Answer 1

试试这个

＆＃13;

＆＃13;

 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)))
              

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以做那样的事情

let regularUrls = []; 

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

regularUrls数组将包含所有常规网址。

这是测试它的小提琴http://jsfiddle.net/IbraheemAlSaady/xtr81m74/