前端项目实战贰拾贰-react-admin+material ui数据处理reduce

最新推荐文章于 2024-05-13 09:47:24 发布

前端歌谣

最新推荐文章于 2024-05-13 09:47:24 发布

阅读量42

点赞数

文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/qq_41632427/article/details/131477199

版权

前端项目实战案例专栏收录该内容

500 篇文章 1 订阅

订阅专栏

该代码段展示了如何使用JavaScript的`reduce`方法将`MainData`和`DetailData`数组重组为一个对象，其中主项目作为键，对应的明细数据作为值的数组。这用于创建一个结构化的项目-明细数据映射。

摘要由CSDN通过智能技术生成

export const MainData = ['项目1', '项目2', '项目3']

export const DetailData = [{
    id: '1',
    title: '1-01',
    detail: '明细1',
    MainData: '项目1'
},
{
    id: '2',
    title: '1-01',
    detail: '明细1',
    MainData: '项目2'
},
{
    id: '3',
    title: '1-02',
    detail: '明细1',
    MainData: '项目2'
},
{
    id: '4',
    title: '1-02',
    detail: '明细1',
    MainData: '项目3'
},
]


        var MainLevel = MainData.reduce((resData: any, item: any) => {
            resData = {
                ...resData,
                [item]: []
            }
           
            return resData
        }, {})
        return Object.entries(DetailData.reduce((resData1: any, item1: any) => {
            resData1[item1.MainData] = [...resData1[item1.MainData], item1]
            console.log(resData1,"resData11")
            return resData1
        }, MainLevel))

{
    "项目1": [
        {
            "id": "1",
            "title": "1-01",
            "detail": "明细1",
            "MainData": "项目1"
        }
    ],
    "项目2": [
        {
            "id": "2",
            "title": "1-01",
            "detail": "明细1",
            "MainData": "项目2"
        },
        {
            "id": "3",
            "title": "1-02",
            "detail": "明细1",
            "MainData": "项目2"
        }
    ],
    "项目3": [
        {
            "id": "4",
            "title": "1-02",
            "detail": "明细1",
            "MainData": "项目3"
        }
    ]
}