zoukankan      html  css  js  c++  java
  • 对数组对象递归遍历给子对象添加父对象属性的方法

    原始数据如下所示

    [
        {
            "name": "互联网",
            "label": "互联网",
            "value": "互联网",
            "children": [
                {
                    "name": "电商",
                    "label": "电商",
                    "value": "电商",
                    "children": [
                        {
                            "name": "天猫",
                            "label": "天猫",
                            "value": "天猫"
                        },
                        {
                            "name": "拼多多",
                            "label": "拼多多",
                            "value": "拼多多"
                        },
                        {
                            "name": "亚马逊",
                            "label": "亚马逊",
                            "value": "亚马逊"
                        },
                    ]
                },
                {
                    "name": "汽车美容",
                    "label": "汽车美容",
                    "value": "汽车美容"
                },
                {
                    "name": "个人服务",
                    "label": "个人服务",
                    "value": "个人服务"
                },
                {
                    "name": "医疗卫生",
                    "label": "医疗卫生",
                    "value": "医疗卫生"
                }
            ]
        }
    ]

    先需要给所有children里面的label加上父级label作为前缀【效果:互联网-电商-天猫】

    实现代码如下

    let respData:any[] = resp.data.content
    function recursionList(data, line='') {
      data.map((item:any) => {
        item.name = item.tag.name
        item.label = `${line ? line + '-' : ''}${item.tag.name}`
        item.value = `${line ? line + '-' : ''}${item.tag.name}`
        if(item.children && item.children instanceof Array && item.children.length){
          let nameLine = `${line ? line + '-' : ''}${item.tag.name}`
          recursionList(item.children, nameLine)
        }
      })
    }
    recursionList(respData)

    处理后结果:

    [
        {
            "name": "互联网",
            "label": "互联网",
            "value": "互联网",
            "children": [
                {
                    "name": "电商",
                    "label": "电商",
                    "value": "电商",
                    "children": [
                        {
                            "name": "天猫",
                            "label": "天猫",
                            "value": "天猫",
                            "otherLabel": "互联网-电商-天猫"
                        },
                        {
                            "name": "拼多多",
                            "label": "拼多多",
                            "value": "拼多多",
                            "otherLabel": "互联网-电商-拼多多"
                        },
                        {
                            "name": "亚马逊",
                            "label": "亚马逊",
                            "value": "亚马逊",
                            "otherLabel": "互联网-电商-亚马逊"
                        }
                    ],
                    "otherLabel": "互联网-电商"
                },
                {
                    "name": "汽车美容",
                    "label": "汽车美容",
                    "value": "汽车美容",
                    "otherLabel": "互联网-汽车美容"
                },
                {
                    "name": "个人服务",
                    "label": "个人服务",
                    "value": "个人服务",
                    "otherLabel": "互联网-个人服务"
                },
                {
                    "name": "医疗卫生",
                    "label": "医疗卫生",
                    "value": "医疗卫生",
                    "otherLabel": "互联网-医疗卫生"
                }
            ],
            "otherLabel": "互联网"
        }
    ]
  • 相关阅读:
    python面向编程:阶段练习
    python面向编程:面向对象、init、绑定方法、案例练习
    python常用模块:re模块案例、subprocess
    分享知识-快乐自己:FastDFS 图片服务器的搭建
    分享知识-快乐自己:Nginx概述及如何使用
    分享知识-快乐自己:Java中各种集合特点
    分享知识-快乐自己:虚拟机克隆
    分享知识-快乐自己:安装虚拟机详细步骤
    分享知识-快乐自己:虚拟机 NET 网络配置
    分享知识-快乐自己:IO流基本操作
  • 原文地址:https://www.cnblogs.com/art-poet/p/14043258.html
Copyright © 2011-2022 走看看