ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

扁平数组 转 JSON树结构

2022-01-30 15:01:21  阅读:153  来源: 互联网

标签:pre parent title 树结构 标题 item JSON 数组 id


let flatArr = [
            { id: 1, title: '标题1', parent_id: 0 },
            { id: 2, title: '标题2', parent_id: 0 },
            { id: 3, title: '标题2-1', parent_id: 2 },
            { id: 4, title: '标题3-1', parent_id: 3 },
            { id: 5, title: '标题4-1', parent_id: 4 },
            { id: 6, title: '标题2-1', parent_id: 2 },
        ]
        
        function convert (list) {
          const result = [];
          const map = list.reduce((pre,cur) => {
              pre[cur.id] = cur;
              return pre
          }, {})
        // 1: {id: 1, title: '标题1', parent_id: 0}
        // 2: {id: 2, title: '标题2', parent_id: 0}
        // 3: {id: 3, title: '标题2-1', parent_id: 2}
        // 4: {id: 4, title: '标题3-1', parent_id: 3}
        // 5: {id: 5, title: '标题4-1', parent_id: 4}
        // 6: {id: 6, title: '标题2-1', parent_id: 2}
          for (let item of list) {
              if (item.parent_id === 0) {
                  result.push(item)
                  continue
              }
              if (item.parent_id in map) {
                  const parent = map[item.parent_id]
                  parent.children = parent.children || []
                  parent.children.push(item)
              }
          }
          return result
        }
        console.log(convert(flatArr));

运行结果 

 

标签:pre,parent,title,树结构,标题,item,JSON,数组,id
来源: https://blog.csdn.net/weixin_46874084/article/details/122752913

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有