搜索
搜索

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

Siva Kumar S 发表于 Dev
65
西瓦·库马尔（Siva Kumar S）

我有以下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中，我需要将所有regularUrls放在一个数组中，如何使用angular2 / typescript / rxjs中的map做到这一点。

目前，我正在使用两个for循环，也可以使用三个.maps在一个数组中获取regularUrl。

如何在angular2中使用rxjs或typescript解决此问题

任何解决方案将全力帮助您，谢谢

易卜拉欣·萨迪

你可以做这样的事情

let regularUrls = []; 

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

该regularUrls数组将具有所有常规的Urls。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angular2中使用<html>模板？

如何在angular2中使用异步主题？

如何在angular2中使用sharedModule？

如何在Angular2中使用bootstrap / jquery

如何在Angular2中使用httpparamserializer

如何在angular2中使用ngSwitch

如何在angular2中使用谓词

如何在Angular2中使用Luxon？

如何在Angular 2中使用TypeScript过滤数组？

Angular2 中使用 TypeScript 的嵌套函数

如何在Jsfiddle中使用Angular2和Typescript

如何在angular2中使ngOnChanges工作

如何在Angular2中使组件通用

如何在Angular2 / Typescript中调试Observable值？

在typescript / angular2中使用openlayer3

在TypeScript / Angular2中使用代理

如何在Angular2中使用angular-in-memory-web-api？

如何在angular2中使用FormControl从INPUT标签中获取逗号分隔值？

如何从 Typescript 中的对象数组中获取特定数据？

如何在Angular2中使用数组迭代表单组

如何在Angular2中使用AngularFire2或Firebase进行多位置“删除”

如何在Angular2中使用* ngFor动态生成ngModel？

如何在Angular2中使用POST发送更多对象？

如何在类Typescirpt / angular2中使用const关键字

如何在Angular2中使用烛台高图？

如何在angular2中使用管道进行路由器链接？

如何在Angular2中使用动态默认路由？

如何在Angular2中使用chart.js？

如何在Angular2中的另一个组件中使用变量

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档