当前位置: 主页 > 日志 > 个人日记 > 文章

扁平数据结构转Tree 正常级数多层级

发布时间: 2022-12-06 09:49:35 作者: 王乐园 浏览次数: 28

有一级数组根据字段上级字段进行数据重组从而达到 根据字段实行数据上下层等级结构

数据源

const list =  [
  {
    created_at: 1670209694000,
    updated_at: 1670209694000,
    id: 1,
    uid: 2,
    content: '哈哈哈哈,博主你真帅',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '蜡笔小新',
      head_img: 'https://www.xxxx.com/_nuxt/avatar.e0b8a185.png',
      id: 2,
      sign: '初生小可爱 什么也没留下~~',
      sex: 1,
      age: '未设置',
      member: 0
    }
  },
  {
    created_at: 1670209733000,
    updated_at: 1670209733000,
    id: 2,
    uid: 1,
    content: '12312312',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670210204000,
    updated_at: 1670210204000,
    id: 3,
    uid: 1,
    content: '123123',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670210274000,
    updated_at: 1670210274000,
    id: 4,
    uid: 1,
    content: '啊实打实的',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670211120000,
    updated_at: 1670211120000,
    id: 5,
    uid: 1,
    content: '政策咨询曹张新村自行车',
    top_uid: 1,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224724000,
    updated_at: 1670224724000,
    id: 6,
    uid: 1,
    content: '顶顶顶顶顶',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224757000,
    updated_at: 1670224757000,
    id: 7,
    uid: 1,
    content: '烦烦烦方法',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224814000,
    updated_at: 1670224814000,
    id: 8,
    uid: 1,
    content: 'vvvv',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224845000,
    updated_at: 1670224845000,
    id: 9,
    uid: 1,
    content: '帆帆帆帆',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224874000,
    updated_at: 1670224874000,
    id: 10,
    uid: 1,
    content: '烦烦烦',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224921000,
    updated_at: 1670224921000,
    id: 11,
    uid: 1,
    content: '宣传宣传宣传',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670224933000,
    updated_at: 1670224933000,
    id: 12,
    uid: 1,
    content: '从v不错v不错v吧',
    top_uid: 11,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670242132000,
    updated_at: 1670242132000,
    id: 13,
    uid: 2,
    content: '哈哈哈哈,博主你真帅',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '蜡笔小新',
      head_img: 'https://www.xxxx.com/_nuxt/avatar.e0b8a185.png',
      id: 2,
      sign: '初生小可爱 什么也没留下~~',
      sex: 1,
      age: '未设置',
      member: 0
    }
  },
  {
    created_at: 1670242174000,
    updated_at: 1670242174000,
    id: 14,
    uid: 2,
    content: '99991哈啊哈',
    top_uid: 12,
    content_id: 1,
    user: {
      nick_name: '蜡笔小新',
      head_img: 'https://www.xxxx.com/_nuxt/avatar.e0b8a185.png',
      id: 2,
      sign: '初生小可爱 什么也没留下~~',
      sex: 1,
      age: '未设置',
      member: 0
    }
  },
  {
    created_at: 1670289961000,
    updated_at: 1670289961000,
    id: 15,
    uid: 1,
    content: '啊实打实的',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  },
  {
    created_at: 1670289989000,
    updated_at: 1670289989000,
    id: 16,
    uid: 1,
    content: '政策执行查询支持',
    top_uid: 0,
    content_id: 1,
    user: {
      nick_name: '微信用户1',
      head_img: 'https://www.xxxx.com/images/pulpit.jpg',
      id: 1,
      sign: '我是卖报的小行家',
      sex: 1,
      age: 13,
      member: 0
    }
  }
]

方式法:

  Tree(items) {
    const result = []; // 存放结果集
    const itemMap = {}; //
    for (const item of items) {
      const id = item.id;
      const top_uid = item.top_uid;

      if (!itemMap[id]) {
        itemMap[id] = {
          children: [],
        };
      }

      itemMap[id] = {
        ...item,
        children: itemMap[id].children,
      };

      const treeItem = itemMap[id];

      if (top_uid === 0) {
        result.push(treeItem);
      } else {
        if (!itemMap[top_uid]) {
          itemMap[top_uid] = {
            children: [],
          };
        }
        itemMap[top_uid].children.push(treeItem);
      }
    }
    return result;
  }

执行后的结果:

[
		{
			"created_at": 1670209694000,
			"updated_at": 1670209694000,
			"id": 1,
			"uid": 2,
			"content": "哈哈哈哈,博主你真帅",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "蜡笔小新",
				"head_img": "https://www.xxxx.com/_nuxt/avatar.e0b8a185.png",
				"id": 2,
				"sign": "初生小可爱 什么也没留下~~",
				"sex": 1,
				"age": "未设置",
				"member": 0
			},
			"children": [
				{
					"created_at": 1670211120000,
					"updated_at": 1670211120000,
					"id": 5,
					"uid": 1,
					"content": "政策咨询曹张新村自行车",
					"top_uid": 1,
					"content_id": 1,
					"user": {
						"nick_name": "微信用户1",
						"head_img": "https://www.xxxxx.com/images/pulpit.jpg",
						"id": 1,
						"sign": "我是卖报的小行家",
						"sex": 1,
						"age": 13,
						"member": 0
					},
					"children": []
				}
			]
		},
		{
			"created_at": 1670209733000,
			"updated_at": 1670209733000,
			"id": 2,
			"uid": 1,
			"content": "12312312",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670210204000,
			"updated_at": 1670210204000,
			"id": 3,
			"uid": 1,
			"content": "123123",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670210274000,
			"updated_at": 1670210274000,
			"id": 4,
			"uid": 1,
			"content": "啊实打实的",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670224724000,
			"updated_at": 1670224724000,
			"id": 6,
			"uid": 1,
			"content": "顶顶顶顶顶",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670224757000,
			"updated_at": 1670224757000,
			"id": 7,
			"uid": 1,
			"content": "烦烦烦方法",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670224814000,
			"updated_at": 1670224814000,
			"id": 8,
			"uid": 1,
			"content": "vvvv",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670224845000,
			"updated_at": 1670224845000,
			"id": 9,
			"uid": 1,
			"content": "帆帆帆帆",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670224874000,
			"updated_at": 1670224874000,
			"id": 10,
			"uid": 1,
			"content": "烦烦烦",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670224921000,
			"updated_at": 1670224921000,
			"id": 11,
			"uid": 1,
			"content": "宣传宣传宣传",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": [
				{
					"created_at": 1670224933000,
					"updated_at": 1670224933000,
					"id": 12,
					"uid": 1,
					"content": "从v不错v不错v吧",
					"top_uid": 11,
					"content_id": 1,
					"user": {
						"nick_name": "微信用户1",
						"head_img": "https://www.xx.com/images/pulpit.jpg",
						"id": 1,
						"sign": "我是卖报的小行家",
						"sex": 1,
						"age": 13,
						"member": 0
					},
					"children": [
						{
							"created_at": 1670242174000,
							"updated_at": 1670242174000,
							"id": 14,
							"uid": 2,
							"content": "99991哈啊哈",
							"top_uid": 12,
							"content_id": 1,
							"user": {
								"nick_name": "蜡笔小新",
								"head_img": "https://www.xxxx.com/_nuxt/avatar.e0b8a185.png",
								"id": 2,
								"sign": "初生小可爱 什么也没留下~~",
								"sex": 1,
								"age": "未设置",
								"member": 0
							},
							"children": []
						}
					]
				}
			]
		},
		{
			"created_at": 1670242132000,
			"updated_at": 1670242132000,
			"id": 13,
			"uid": 2,
			"content": "哈哈哈哈,博主你真帅",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "蜡笔小新",
				"head_img": "https://www.xxxx.com/_nuxt/avatar.e0b8a185.png",
				"id": 2,
				"sign": "初生小可爱 什么也没留下~~",
				"sex": 1,
				"age": "未设置",
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670289961000,
			"updated_at": 1670289961000,
			"id": 15,
			"uid": 1,
			"content": "啊实打实的",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		},
		{
			"created_at": 1670289989000,
			"updated_at": 1670289989000,
			"id": 16,
			"uid": 1,
			"content": "政策执行查询支持",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "微信用户1",
				"head_img": "https://www.xx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		}
	]

本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: