這里有類似的答案，但我見過和測驗過的所有答案都沒有通過兩個層次，所以我不認為這是一個重復的問題......我正在嘗試過濾一組物件。它的每個物件都可以有其他未知深度的嵌套物件。對于我的資料，treeView是treeData的集合，而 treeNode(children) 將具有相同的介面。
export interface TreeView = TreeData[]
export interface TreeData {
label: string;
children?: TreeData[]
}
const treeData =
[
{label: 'obj-1', children: [ {label: 'bananas'},{label: 'apples', children: [
{label: 'bananas',},{label: 'apples'}, {label: 'coconut', children: [
{label: 'bananas'},{label: 'oranges', },
]},
]}]},
{label: 'obj-2', children: [ {label: 'apples'},{label: 'apples', children: [
{label: 'oranges',},{label: 'apples'}, {label: 'coconut', children: [
{label: 'bananas'},{label: 'oranges', children: [
{label: 'bananas'},{label: 'oranges', },
] },
]},
]}]},
{label: 'obj-3', children: [ {label: 'apples'},{label: 'mango'},{label: 'apples', children: [
{label: 'oranges',},{label: 'apples'}, {label: 'coconut', children: [
{label: 'bananas'},{label: 'oranges', children: [
{label: 'bananas'},{label: 'mango', },
] },
]},
]}]},
]
應洗掉標簽與 searchTerm 不匹配的物件，如果物件具有 children 屬性，請重復該程序。我一直在嘗試用遞回來解決這個問題。這是我的代碼...
const recurse = (array, searchTerm) => {
return array.map((element) => {
return {...element, subElements: element.subElements.filter((subElement) => subElement.label === searchTerm)}
})
}
const filterArray = (myArray,value) => {
for(let i = 0; i < myArray.length;i ){
if(myArray.children){
if(myArray[i].children){
filterArray(myArray[i].children,value)
}
}
}
recurse(myArray,value)
}
console.log(filterArray(treeData,'bananas'))
在上面的示例中，搜索“bananas”將根據需要過濾整個陣列的深度，洗掉標簽 prop 不等于香蕉的任何物件；如果一個物件沒有子物件，它的標簽屬性是否等于搜索詞，如果沒有，則將其從其父陣列中洗掉。提前非常感謝！
我想回傳原始陣列的過濾版本。只有帶有“香蕉”標簽的物件應該顯示在這里
uj5u.com熱心網友回復：
我想你會想要這樣的東西：
const filterByLabel = (array, searchTerm) => {
return array.reduce((prev, curr) => {
const children = curr.children ? filterByLabel(curr.children, searchTerm) : undefined;
return curr.label === searchTerm || children?.length > 0 ? [...prev, { ...curr, children }] : prev;
}, []);
}
filterByLabel(treeData, 'bananas');
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/470046.html
標籤：javascript 反应 递归