I currently have an array with nested children in it, where the children can range from one to multiple values. I am working on implementing a local filter within my component. Whenever a user types anything into the textInput, the application will display suggestions based on the word typed by the user. These suggestions will be sourced from my pre-defined array.
Below is the code I am currently using:
export function onSearch(categoryList, searchText) {
var searchList = [];
return function(dispatch) {
categoryList.map((item, i) => {
if (item.title.includes(searchText)) {
searchList.push(item);
}
});
dispatch({
type: types.Search_Success,
payload: searchList
});
};
}
In the above method, you can see that the code will filter values up to the parent level only. Therefore, I tried to add code by including conditions like this:
if(item.children.length > 0){
item.children.map((item, i) => {
if (item.title.includes(searchText)) {
searchList.push(item);
}
});
}
However, the issue arises when I have many children as I cannot include such conditions inside the code.
Here is an example of how my array is structured:
[{
"id": "38",
"title": "What's New",
"url": "what-is-new"
}, {
"id": "20",
"title": "Women",
"url": "women",
"children": [{
"id": "21",
"title": "Tops",
"url": "tops-women",
"children": [{
"id": "23",
"title": "Jackets",
"url": "jackets-women"
}, {
"id": "24",
"title": "Hoodies & Sweatshirts",
"url": "hoodies-and-sweatshirts-women"
}, {
"id": "25",
"title": "Tees",
"url": "tees-women"
}, {
"id": "26",
"title": "Bras & Tanks",
"url": "tanks-women"
}]
}, {
"id": "22",
"title": "Bottoms",
"url": "bottoms-women",
"children": [{
"id": "27",
"title": "Pants",
"url": "pants-women"
}, {
"id": "28",
"title": "Shorts",
"url": "shorts-women"
}]
}]
}, {
"id": "11",
"title": "Men",
"url": "men",
"children": [{
"id": "12",
"title": "Tops",
"url": "tops-men",
"children": [{
"id": "14",
"title": "Jackets",
"url": "jackets-men"
}, {
"id": "15",
"title": "Hoodies & Sweatshirts",
"url": "hoodies-and-sweatshirts-men"
}, {
"id": "16",
"title": "Tees",
"url": "tees-men"
}, {
"id": "17",
"title": "Tanks",
"url": "tanks-men"
}]
}, {
"id": "13",
"title": "Bottoms",
"url": "bottoms-men",
"children": [{
"id": "18",
"title": "Pants",
"url": "pants-men"
}, {
"id": "19",
"title": "Shorts",
"url": "shorts-men"
}]
}]
}]
What I aim for is that when I type "m", it should show all titles containing the letter "m".
Please inform me if my question is unclear.
Regards