扁平数据结构转Tree 二级展示
发布时间： 2022-12-06 09:26:21
作者： 王乐园 浏览次数：
392
有一级数组根据字段上级字段进行数据重组从而达到 根据字段实行数据 多层级都只展示在数组第二级
数据源
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": []
}
]上一篇：(转载)追忆过往青春
下一篇：(转载)时光悠悠 岁月无言