浅浅使用reduce数据处理小记

5 阅读3分钟

工作中经常遇到渲染echarts的情况,echarts是需要一层一层去渲染的,后端会按照一个柱子一个柱子去返回数据。这种情况下就需要前端进行分组。(之前因为这个跟后端吵了好几次😂,现在看来也确实是他懒也是我菜)

本次就简单记录一下reduce分组的解决方式

这一段是我要处理的数据
let data = {

            "code": 200,

            "message": "成功",

            "data": [

                {

                    "time": "2024-08-21 09:00:00",

                    "vos": [

                        {


                            "time": "2024-08-21 09:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,

                            "pollutionName": "***001",

                            "unit": "μg/m3"

                        },

                        {



                            "time": "2024-08-21 09:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,

                            "pollutionName": "***002",

                            "unit": "μg/m3"

                        },

                        {

                           

                            "time": "2024-08-21 09:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,

                            "pollutionID": "1724510742855_2_3_1_1",

                            "pollutionName": "***003",

                            "unit": "μg/m3"

                        },

                        {

                           

                            "time": "2024-08-21 09:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,


                            "pollutionName": "***004",

                            "unit": "μg/m3"

                        },

                        {

                           

                            "time": "2024-08-21 09:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,


                            "pollutionName": "**005",

                            "unit": "μg/m3"

                        }

                    ]

                },

                {

                    "time": "2024-08-21 03:00:00",

                    "vos": [

                        {

                           

                            "time": "2024-08-21 03:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,

                            "pollutionID": "1724510742855_2_1_1_1",

                            "pollutionName": "***001",

                            "unit": "μg/m3"

                        },

                        {

                           

                            "time": "2024-08-21 03:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,

                           

                            "pollutionName": "***002",

                            "unit": "μg/m3"

                        },

                        {

                            "time": "2024-08-21 03:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,


                            "pollutionName": "***003",

                            "unit": "μg/m3"

                        },

                        {

                            "time": "2024-08-21 03:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,


                            "pollutionName": "***003",

                            "unit": "μg/m3"

                        },

                        {

                            "time": "2024-08-21 03:00:00",

                            "factorID": "1",

                            "factorName": null,

                            "value": "0.000000",

                            "percent": null,

                            "isdelete": null,

                            "addTime": null,

                            "addUser": null,

                            "editTime": null,

                            "editUser": null,

                            "timeType": null,

                            "forecastDate": null,


                            "pollutionName": "***005",

                            "unit": "μg/m3"

                        }

                    ]

                }

            ]

        }

下面就是我要处理数据的js代码,后端是根据一个时间一个时间返回的数据,我需要的是根据一个站点一个站点的数据,所以进行下边的处理

//按照名称分组

        let endName = {}

        endName = alldata.reduce((acc, pre) => {
            //acc是之前的{},pre是现在的
            //看下之前的内容中有没有这个数据没有的话,新建一个[]

            if (!acc[pre.pollutionName]) {

                acc[pre.pollutionName] = []

            }
            //有的话直接push数据
            acc[pre.pollutionName].push(pre)

            return acc

        }, {})
        
        //返回的不是我想要的json形式,所以进行如下处理
        const objData = Object.entries(endName).map(([pollutionName, list]) => ({

            pollutionName,

            list

        }))

结束啦~~哈哈reduce的功能我目前还在探索中...加油奥利给