html - 倾斜或按摩阵列

Question

我有一个带有对象数组的 JSON 响应。我想以角度方式了解如何将其展平以显示在材料表中。我想将 accessID 和 desc 展平为一个平面数组，例如 [ADPRATE, QUOCON, USRIDMAN]。

"data": [
    [
        {
            "categoryId": "ADPDSHB",
            "categoryDesc": "Dashboard - Admin",
            "categoryAccess": [
                {
                    "BoRefAccess": {
                        "accessId": "ADPRATE",
                        "accessDesc": "Adoption Rate"
                    }
                },
                {
                    "BoRefAccess": {
                        "accessId": "QUOCON",
                        "accessDesc": "Quotation Conversion "
                    }
                }
            ]
        }
    ],
    [
        {
            "categoryId": "USRMAN",
            "categoryDesc": "User Management",
            "categoryAccess": [
                {
                    "BoRefAccess": {
                        "accessId": "USRIDMAN",
                        "accessDesc": "User ID Management"
                    }
                }
            ]
        }
    ]
]

新的预期结果，通过扁平化内部数组

  {
       {
        "categoryId": "ADPDSHB",
        "categoryDesc": "Dashboard - Admin",
        "categoryAccess": 
            {
                "BoRefAccess": {
                    "accessId": "ADPRATE",
                    "accessDesc": "Adoption Rate"
                }
            },
         },
            {
        "categoryId": "ADPDSHB",
        "categoryDesc": "Dashboard - Admin",
        "categoryAccess": 
            {
                "BoRefAccess": {
                    "accessId": "QUOCON",
                    "accessDesc": "Quotation Conversion"
                }
            },
         },

表格示例

标签： htmlarraysangulartypescript

Answer 1

请像这样尝试。

const data = {"data": [
    [
        {
            "categoryId": "ADPDSHB",
            "categoryDesc": "Dashboard - Admin",
            "categoryAccess": [
                {
                    "BoRefAccess": {
                        "accessId": "ADPRATE",
                        "accessDesc": "Adoption Rate"
                    }
                },
                {
                    "BoRefAccess": {
                        "accessId": "QUOCON",
                        "accessDesc": "Quotation Conversion "
                    }
                }
            ]
        }
    ],
    [
        {
            "categoryId": "USRMAN",
            "categoryDesc": "User Management",
            "categoryAccess": [
                {
                    "BoRefAccess": {
                        "accessId": "USRIDMAN",
                        "accessDesc": "User ID Management"
                    }
                }
            ]
        }
    ]
]}

编辑：基于评论

data.data.map(item => {
    console.log(item[0])
    return {
       "categoryId" : item[0].categoryId,
       "categoryDesc" : item[0].categoryDesc, 
       "categoryAccess" : item[0].categoryAccess.filter(access =>access["BoRefAccess"].accessId === item[0].categoryId) 
    }
})

此逻辑过滤掉类别访问数组。它将仅显示具有相同类别 ID 的项目。希望这就是你要找的。