问答

js数据递归,组成树形结构数据,求指教

作者:admin 2021-05-06 我要评论

有一份这样的数据: let list = [ { "fileVo": [ { "fileName": "2021-11-13-10-01-44_Cam1.mp4", "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44", "upd...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

有一份这样的数据:

let list = [
    {
      "fileVo": [
        {
          "fileName": "2021-11-13-10-01-44_Cam1.mp4",
          "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44",
          "updateTime": 1611565885
        },
        {
          "fileName": "2021-11-13-10-01-44_camera.csd",
          "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44",
          "updateTime": 1611565891
        }
      ],
      "folder": "/web/tar/oriFiles/2021-11-13-10-01-44",
      "folderVos": [
        {
          "fileVo": [
            {
              "fileName": "2021-01-20-12-03-55_camera.csd",
              "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44/solo",
              "updateTime": 1611126523
            },
            {
              "fileName": "2021-01-20-12-03-55_Cam1.mp4",
              "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44/solo",
              "updateTime": 1611132876
            }
          ],
          "folder": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
          "folderVos": []
        }
      ]
    },
    {
      "fileVo": [
        {
          "fileName": "2021-01-20-12-03-35_camera.csd",
          "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35",
          "updateTime": 1611565902
        },
        {
          "fileName": "2021-01-20-12-03-35_Cam1.mp4",
          "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35",
          "updateTime": 1611565907
        }
      ],
      "folder": "/web/tar/oriFiles/2021-01-20-12-03-35",
      "folderVos": [
        {
          "fileVo": [
            {
              "fileName": "2021-01-20-12-03-55_camera.csd",
              "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
              "updateTime": 1611126523
            },
            {
              "fileName": "2021-01-20-12-03-55_Cam1.mp4",
              "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
              "updateTime": 1611132876
            }
          ],
          "folder": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
          "folderVos": []
        }
      ]
    },
    {
      "fileVo": [],
      "folder": "/web/tar/oriFiles/fitlyidd",
      "folderVos": []
    }
  ]

想生成树形结构的数据格式,如下:

[
  {
    "fileName": "/web/tar/oriFiles/2021-11-13-10-01-44",
    "children": [
      {
        "fileName": "2021-11-13-10-01-44_Cam1.mp4",
        "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44",
        "updateTime": 1611565885
      },
      {
        "fileName": "2021-11-13-10-01-44_camera.csd",
        "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44",
        "updateTime": 1611565891
      },
      {
        "fileName": "/web/tar/oriFiles/2021-11-13-10-01-44/solo",
        "children": [
          {
            "fileName": "2021-01-20-12-03-55_camera.csd",
            "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44/solo",
            "updateTime": 1611126523
          },
          {
            "fileName": "2021-01-20-12-03-55_Cam1.mp4",
            "parentDir": "/web/tar/oriFiles/2021-11-13-10-01-44/solo",
            "updateTime": 1611132876
          }
        ]
      }
    ]
  },
  {
    "fileName": "/web/tar/oriFiles/2021-01-20-12-03-35",
    "children": [
      {
        "fileName": "2021-01-20-12-03-35_camera.csd",
        "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35",
        "updateTime": 1611565902
      },
      {
        "fileName": "2021-01-20-12-03-35_Cam1.mp4",
        "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35",
        "updateTime": 1611565907
      },
      {
        "fileName": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
        "children": [
          {
            "fileName": "2021-01-20-12-03-55_camera.csd",
            "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
            "updateTime": 1611126523
          },
          {
            "fileName": "2021-01-20-12-03-55_Cam1.mp4",
            "parentDir": "/web/tar/oriFiles/2021-01-20-12-03-35/solo",
            "updateTime": 1611132876
          }
        ]
      }
    ]
  },
  {
    "fileName": "/web/tar/oriFiles/fitlyidd",
    "children": []
  }
]

目前编写的代码只实现了2级,以后可能会有更深的层级,想写成将此方法写成递归,请求指教,谢谢。

function handleData(list) {
      let result = list.map(item => {
        let fileData = {
          fileName: item.folder,
          children: []
        }
        item.fileVo.forEach(file => {
          fileData.children.push(file)
        })

        // 如果folderVos有值生成
        if (item.folderVos && item.folderVos.length > 0) {
          let r = item.folderVos.map(childrenItem => {
            let childrenData = {
              fileName: childrenItem.folder,
              children: []
            }
            childrenItem.fileVo.forEach(file1 => {
              childrenData.children.push(file1)
            })
            return childrenData
          })
          fileData.children.push(...r)
        }
        
        return fileData
      });
      console.log(result)
    }

    handleData(list);
###
function getTree(list,result){
    for(let i=0;i<list.length;i++){
        let item = {
            fileName:list[i].folder || list[i].fileName,
            children:list[i].fileVo ? getTree(list[i].fileVo,[]) : undefined,
            parentDir:list[i].parentDir,
            updateTime:list[i].updateTime
        };
        for(let key in item){
            if(item[key] === undefined){
                delete item[key];
            }
        }
        result.push(item)
    }
    return result;
}
###
function transFolders(folders) {
    function folderToNode(folder) {
        const { folder: fileName, fileVo, folderVos } = folder;
        const children = (fileVo || []).concat((folderVos || []).map(folderToNode));
        return {
            fileName,
            children
        }
    }
    return folders.map(folderToNode); 
}

// TEST
transFolders(list);
###
function map(list) {
    return list.map(v => ({
        fileName: v.folder||v.fileName,
        parentDir: v.parentDir||null,
        children: Array.isArray(v.fileVo) ? map(v.fileVo) : []
    }))
}
###

谢谢 @手机用户2117 提供的思路

function getTree(list, result) {
      for (let i = 0; i < list.length; i++) {
        let item = {
          fileName: list[i].folder || list[i].fileName,
          children: list[i].fileVo,
        };

        if (list[i].folderVos && list[i].folderVos.length > 0) {
          item.children.push(...getTree(list[i].folderVos, []))
        }

        result.push(item)
      }
      return result;
    }
    console.log(getTree(list, []))

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js数据递归,组成树形结构数据,求指教

    js数据递归,组成树形结构数据,求指教

  • python+ pycharm 环境安装 + pycharm使

    python+ pycharm 环境安装 + pycharm使

  • 进行update操作,前端要穿token和数据

    进行update操作,前端要穿token和数据

  • antd vue a-select下拉框数据回显的问

    antd vue a-select下拉框数据回显的问

腾讯云代理商
海外云服务器