如何将路径list转成tree结构

新手上路,请多包涵

请教下,如何将 list 转成 tree
还有,后端获取的数据是一个扁平的 list ,前端生成文件管理界面,希望能提供一个思路。

谢谢

[
  'pic1.png',
  'src/pic2.png',
  'src/pic3.png',
  'src/news/pic4.png',
  'src/show/pic5.png',
  'src/show/media/pic6.png',
  'site/pic7.png',
  'site/article/pic8.png'
]

将上面的数据生成下面格式

[
  {
    name: 'pic1.png'
  },
  {
    name: 'src',
    children: [
      {
        name: 'pic2.png'
      },
      {
        name: 'pic3.png'
      },
      {
        name: 'news',
        children: [
          {
            name: 'pic4.png'
          }
        ]
      },
      {
        name: 'show',
        children: [
          {
            name: 'pic5.png'
          },
          {
            name: 'media',
            children: [
              {
                name: 'pic6.png'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    name: 'site',
    children: [
      {
        name: 'pic7.png'
      },
      {
        name: 'article',
        children: {
          name: 'pic8.png'
        }
      }
    ]
  }
]
阅读 5.7k
2 个回答
function listToTree(arr) {
    var ret = [];
    if (Array.isArray(arr)) {
        for (var i = 0; i < arr.length; ++i) {
            var path = arr[i].split("/");
            var _ret = ret;
            for (var j = 0; j < path.length; ++j) {
                var name = path[j];
                var obj = null;
                for (var k = 0; k < _ret.length; ++k) {
                    var _obj = _ret[k];
                    if (_obj.name === name) {
                        obj = _obj;
                        break;
                    }
                }
                if (!obj) {
                    obj = { name: name };
                    if (name.indexOf(".") < 0) obj.children = [];
                    _ret.push(obj);
                }
                if (obj.children) _ret = obj.children;
            }
        }
    }
    return ret;
}
var list = [
  'pic1.png',
  'src/pic2.png',
  'src/pic3.png',
  'src/news/pic4.png',
  'src/show/pic5.png',
  'src/show/media/pic6.png',
  'site/pic7.png',
  'site/article/pic8.png'
];
var tree = listToTree(list);
console.log(tree);

叫后端给你转好

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题