對數組對象遞歸遍歷給子對象添加父對象屬性的方法


原始數據如下所示

[
    {
        "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": "互聯網"
    }
]

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM