0
92
ViewsSearch in the multiply tree view doesn't work properly
have a problem with the implamantation search in the multiple tree view.
Can check the code in the link.
In the group we have childGroup and list, we have to search lists and groups names. (check data in the data.js file)
Think the problem is somewhere here.
const search = (items, term) => {
return items.reduce((acc, item) => {
if (contains(item.name, term)) {
acc.push(item);
} else if (item.childGroupList?.length) {
let newGroupsItems = search(item.childGroupList, term);
if (newGroupsItems?.length) {
item.childGroupList = newGroupsItems;
acc.push(item);
}
} else if (item.list?.length) {
let newListItems = search(item.list, term);
if (newListItems?.length) {
item.list = newListItems;
acc.push(item);
}
}
return acc;
}, []);
};
·
Santiago Gelvez
1 answers
Answer question0
There were a few issues in your recursive search.
Your
if,else if,else ifchain should be independent. They should really be threeifblocks.You need to push the result only after when all the searches are done at a certain level. I got a copy of the item and make
childGroupListandlistproperties empty([]) initially and update them when a search is successful.
Try like this.
// main search function, here is the problem
const search = (items, term) => {
return items.reduce((acc, item) => {
let itemCopy = JSON.parse(JSON.stringify(item));
itemCopy.childGroupList = [];
itemCopy.list = [];
let found = false;
if (contains(item.name, term)) {
found = true;
}
if (item.childGroupList?.length) {
let newGroupsItems = search(item.childGroupList, term);
if (newGroupsItems?.length) {
found = true;
itemCopy.childGroupList = newGroupsItems;
}
}
if (item.list?.length) {
let newListItems = search(item.list, term);
if (newListItems?.length) {
found = true;
itemCopy.list = newListItems;
}
}
if (found) {
acc.push(itemCopy);
}
return acc;
}, []);
};
Code sandbox => https://stackblitz.com/edit/react-rmrlj1?file=src%2FApp.js
·
Santiago Gelvez
Report
Answer question