Article directory
This article will continue to be updated, there are too many things to understand at once, you can bookmark it first, so as not to find the address in the future, or miss the latest update
- Raw data:
const data = [{
"category_name": "test",
"children": [{
"category_name": "test1",
"children": [{
"category_name": "test11",
"children": []
}]
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [{
"tag_name": "test211",
"tag_type": "uin"
},
{
"tag_name": "test212",
"tag_type": "fied"
},
]
}]
},
{
"category_name": "test3",
"children": [{
"tag_name": "test31",
"tag_type": "uin"
},
{
"tag_name": "test32",
"tag_type": "tkdg"
},
]
}
]
}]
1. Filter the specified data (without changing the original data structure)
- The structure of the original data after processing is: (only keep the data whose tag_type is uin type)
[{
"category_name": "test",
"children": [{
"category_name": "test1",
"children": [{
"category_name": "test11",
"children": []
}]
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [{
"tag_name": "test211",
"tag_type": "uin"
},
// {
// "tag_name": "test212",
// "tag_type": "fied"
// },
]
}]
},
{
"category_name": "test3",
"children": [{
"tag_name": "test31",
"tag_type": "uin"
},
// {
// "tag_name": "test32",
// "tag_type": "tkdg"
// },
]
}
]
}]
- Processing function encapsulation and use:
/*
children: 要递归处理的数据
filterKey: 指定过滤的属性
filterValue: 指定过滤的属性值
*/
function handleTagsTree(children, filterKey, filterValue) {
// 如果过滤的属性或属性值未指定时，直接返回原始数据
if (!filterKey || !filterValue) {
return children;
}
const data = [];
children.forEach((item) => {
// 如果存在 children 下一层，则递归遍历并赋值
if (item?.children && item?.children.length !== 0) {
item.children = handleTagsTree(item.children, filterKey, filterValue);
}
data.push(item);
});
// 添加过滤条件
return data.filter(val => val[filterKey] === filterValue || val?.children);
}
const processedData = handleTagsTree(data, 'tag_type', 'uin')
2. Filter the specified data (only keep the structure with data)
- The structure of the original data after processing is: (only keep the data whose tag_type is uin type)
[{
"category_name": "test",
"children": [
// {
// "category_name": "test1",
// "children": [{
// "category_name": "test11",
// "children": []
// }]
//
},
{
"category_name": "test2",
"children": [{
"category_name": "test21",
"children": [{
"tag_name": "test211",
"tag_type": "uin"
},
// {
// "tag_name": "test212",
// "tag_type": "fied"
// },
]
}]
},
{
"category_name": "test3",
"children": [{
"tag_name": "test31",
"tag_type": "uin"
},
// {
// "tag_name": "test32",
// "tag_type": "tkdg"
// },
]
}
]
}]
- Processing function encapsulation and use:
/*
children: 要递归处理的数据
filterKey: 指定过滤的属性
filterValue: 指定过滤的属性值
*/
function handleTagsTree(children, filterKey, filterValue) {
// 如果过滤的属性或属性值未指定时，直接返回原始数据
if (!filterKey || !filterValue) {
return children;
}
const data = [];
children.forEach((item) => {
// 如果存在 children 下一层，则递归遍历并赋值
if (item?.children && item?.children.length !== 0) {
item.children = handleTagsTree(item.children, filterKey, filterValue);
}
data.push(item);
});
// 添加过滤条件
return data.filter(val => val[filterKey] === filterValue || val?.children && val.children.length);
}
const processedData = handleTagsTree(data, 'tag_type', 'uin')
3. Extract the specified data (convert to a new array output)
- The structure of the original data after processing is: (extract the data of the tag_type layer to form a new array)
[
{
"tag_name": "test211",
"tag_type": "uin",
},
{
"tag_name": "test212",
"tag_type": "fied",
},
{
"tag_name": "test31",
"tag_type": "uin",
},
{
"tag_name": "test32",
"tag_type": "tkdg",
},
]
- Processing function encapsulation and use:
/*
children: 要递归处理的数据
filterKey: 指定该层级特有的属性
*/
function handleTagsTree(children, filterKey) {
if (!filterKey) {
return children;
}
let data = [];
children.forEach((item) => {
if (item?.children && item?.children.length !== 0) {
item = handleTagsTree(item.children, filterKey);
data = data.concat(item);
}
if (item.hasOwnProperty(filterKey)) {
data.push(item);
}
});
return data;
}
const processedData = handleTagsTree(data, 'tag_name')