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

扁平数据结构转Tree 二级展示

发布时间: 2022-12-06 09:26:21 作者: 王乐园 浏览次数: 32

有一级数组根据字段上级字段进行数据重组从而达到 根据字段实行数据 多层级都只展示在数组第二级

数据源

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.xxxxx.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
    }
  }
]

方式法:

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

      if (!top_uid) {
        item.children = [];
        result.push(item);
      } else {
        result.forEach((it, ind) => {
          if (it.id === top_uid) {

            item.reply = {
              uid: it.uid,
              top_uid: it.id,
              name: it.user.nick_name,
              head_img: it.user.head_img,
            };
            result[ind].children.push(item);
          } else {
            const os = result[ind].children.find(iqs => iqs.id === top_uid);
            if (os) {
              item.reply = {
                uid: os.uid,
                top_uid: os.id,
                name: os.user.nick_name,
                head_img: os.user.head_img,
              };

              result[ind].children.push(item);
            }
          }
        });
      }
    }
    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.xxxxx.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.xxxx.com/images/pulpit.jpg",
						"id": 1,
						"sign": "我是卖报的小行家",
						"sex": 1,
						"age": 13,
						"member": 0
					},
					"reply": {
						"uid": 2,
						"top_uid": 1,
						"name": "蜡笔小新",
						"head_img": "https://www.xxxxx.com/_nuxt/avatar.e0b8a185.png"
					}
				}
			]
		},
		{
			"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
			},
			"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.xxxx.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.xxxx.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.xxxx.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.xxxx.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.xxxx.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.xxxx.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.xxxx.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.xxxx.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.xxxx.com/images/pulpit.jpg",
						"id": 1,
						"sign": "我是卖报的小行家",
						"sex": 1,
						"age": 13,
						"member": 0
					},
					"reply": {
						"uid": 1,
						"top_uid": 11,
						"name": "微信用户1",
						"head_img": "https://www.xxxx.com/images/pulpit.jpg"
					}
				},
				{
					"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.xxxxx.com/_nuxt/avatar.e0b8a185.png",
						"id": 2,
						"sign": "初生小可爱 什么也没留下~~",
						"sex": 1,
						"age": "未设置",
						"member": 0
					},
					"reply": {
						"uid": 1,
						"top_uid": 12,
						"name": "微信用户1",
						"head_img": "https://www.xxxx.com/images/pulpit.jpg"
					}
				}
			]
		},
		{
			"created_at": 1670242132000,
			"updated_at": 1670242132000,
			"id": 13,
			"uid": 2,
			"content": "哈哈哈哈,博主你真帅",
			"top_uid": 0,
			"content_id": 1,
			"user": {
				"nick_name": "蜡笔小新",
				"head_img": "https://www.xxxxx.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.xxxx.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.xxxx.com/images/pulpit.jpg",
				"id": 1,
				"sign": "我是卖报的小行家",
				"sex": 1,
				"age": 13,
				"member": 0
			},
			"children": []
		}
	]

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

本文地址: