es6 数组问题

        "showModule": [{
            "action_id": "21",
            "action_name": "待办任务",
            "action_type": "1",
            "order": "1",
            "pid": "0"
        }, {
            "action_id": "20",
            "action_name": "物业资源管理",
            "action_type": "1",
            "order": "2",
            "pid": "0",
            "son": [{
                "action_id": "22",
                "action_name": "楼栋管理",
                "action_type": "2",
                "order": "1",
                "pid": "20",
                "son": [{
                    "action_id": "23",
                    "action_name": "添加",
                    "action_type": "3",
                    "order": "1",
                    "pid": "22"
                }, {
                    "action_id": "24",
                    "action_name": "修改",
                    "action_type": "3",
                    "order": "2",
                    "pid": "22"
                }, {
                    "action_id": "25",
                    "action_name": "删除",
                    "action_type": "3",
                    "order": "4",
                    "pid": "22"
                }, {
                    "action_id": "31",
                    "action_name": "详情",
                    "action_type": "3",
                    "order": "4",
                    "pid": "22"
                }]
            }, {
                "action_id": "26",
                "action_name": "房间管理",
                "action_type": "2",
                "order": "2",
                "pid": "20",
                "son": [{
                    "action_id": "27",
                    "action_name": "添加",
                    "action_type": "3",
                    "order": "1",
                    "pid": "26"
                }, {
                    "action_id": "28",
                    "action_name": "修改",
                    "action_type": "3",
                    "order": "2",
                    "pid": "26"
                }, {
                    "action_id": "29",
                    "action_name": "删除",
                    "action_type": "3",
                    "order": "3",
                    "pid": "26"
                }, {
                    "action_id": "30",
                    "action_name": "详情",
                    "action_type": "3",
                    "order": "4",
                    "pid": "26"
                }]
            }],

数据结构是这样的

我想处理一下数据结构
变成下面这样 ,应该怎么写呢

showModule:{
  label: action_name,
  value: action_id,
    son:[
    {
    label: action_name,
      value: action_id,
      son:{
      label: action_name,
      value: action_id,
      }
    },
    {
    label: action_name,
      value: action_id
      }
    ]
}

这么写就能循环一级啊 在item.son 上用map就报错了

  const mapData = data.showModule.map(item => ({
      label: item.action_name,
      value: item.action_id,
      subModule: item.son
      }))
阅读 1.5k
2 个回答

直接上代码:

const data = {
    "showModule": [
        {
            "action_id": "21",
            "action_name": "待办任务",
            "action_type": "1",
            "order": "1",
            "pid": "0"
        },
        {
            "action_id": "20",
            "action_name": "物业资源管理",
            "action_type": "1",
            "order": "2",
            "pid": "0",
            "son": [
                {
                    "action_id": "22",
                    "action_name": "楼栋管理",
                    "action_type": "2",
                    "order": "1",
                    "pid": "20",
                    "son": [
                        {
                            "action_id": "23",
                            "action_name": "添加",
                            "action_type": "3",
                            "order": "1",
                            "pid": "22"
                        },
                        {
                            "action_id": "24",
                            "action_name": "修改",
                            "action_type": "3",
                            "order": "2",
                            "pid": "22"
                        },
                        {
                            "action_id": "25",
                            "action_name": "删除",
                            "action_type": "3",
                            "order": "4",
                            "pid": "22"
                        },
                        {
                            "action_id": "31",
                            "action_name": "详情",
                            "action_type": "3",
                            "order": "4",
                            "pid": "22"
                        }
                    ]
                },
                {
                    "action_id": "26",
                    "action_name": "房间管理",
                    "action_type": "2",
                    "order": "2",
                    "pid": "20",
                    "son": [
                        {
                            "action_id": "27",
                            "action_name": "添加",
                            "action_type": "3",
                            "order": "1",
                            "pid": "26"
                        },
                        {
                            "action_id": "28",
                            "action_name": "修改",
                            "action_type": "3",
                            "order": "2",
                            "pid": "26"
                        },
                        {
                            "action_id": "29",
                            "action_name": "删除",
                            "action_type": "3",
                            "order": "3",
                            "pid": "26"
                        },
                        {
                            "action_id": "30",
                            "action_name": "详情",
                            "action_type": "3",
                            "order": "4",
                            "pid": "26"
                        }
                    ]
                }
            ]
        }
    ]
};

const reserved = item => {
    let res = {label: item.action_name, value: item.action_id};
    if(item.son && item.son.length > 0) {
        res.son = item.son.map(s => reserved(s));
    }
    return res;
};

const result = data.showModule.reduce((res, item) => {
    res.push(reserved(item));
    return res;
}, []);

console.log(result);

我觉得题主之所以想处理成label、value这样的结构,应该是页面的UI组件渲染需要这样的键值对才能渲染;要用到的就是action_id、action_name,分别对应转化为value、label就行了,对象里面的其他键值对可以不用管了,不影响页面渲染。
因此只要写成下面的就行了:

data.showModule = JSON.stringify(data.showModule).relace(/action_id/g, 'value').replace(/action_name/g, 'label');
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题