score:6
Accepted answer
this solution assumes that you use unique id
for each item in the tree.
it uses depth first search algorithm.
before trying please fix your sample data non-unique ids. i didn't notice them at first and wasted time debugging for no bug.
function dfs(node, term, foundids) {
// implement your search functionality
let ismatching = node.name && node.name.indexof(term) > -1;
if (array.isarray(node.children)) {
node.children.foreach((child) => {
const hasmatchingchild = dfs(child, term, foundids);
ismatching = ismatching || hasmatchingchild;
});
}
// we will add any item if it matches our search term or if it has a children that matches our term
if (ismatching && node.id) {
foundids.push(node.id);
}
return ismatching;
}
function filter(data, matchedids) {
return data
.filter((item) => matchedids.indexof(item.id) > -1)
.map((item) => ({
...item,
children: item.children ? filter(item.children, matchedids) : [],
}));
}
function search(term) {
// we wrap data in an object to match the node shape
const datanode = {
children: data,
};
const matchedids = [];
// find all items ids that matches our search (or their children does)
dfs(datanode, term, matchedids);
// filter the original data so that only matching items (and their fathers if they have) are returned
return filter(data, matchedids);
}
Source: stackoverflow.com
Related Query
- Search Filter with React Native on FlatList
- how to create React search filter for search multiple object key values
- React.js search filter in treeview
- How to fix a React search filter that doesn't update on backspace
- Search filter does not work across the react-table on setState : React JS
- Search bar to filter table results in React with timeout
- React Search filter function
- React search and filter methods issue
- How to implement Regex filter in a React search bar?
- React Filter not returning data if search is empty
- Make a search filter with react and typescript
- How to create dynamic search filter in react JS?
- react search filter with select option
- How to do filter search in react js / JS?
- search filter by name in react using input
- How to add custom icon in react select of search filter
- How make work a search filter in react for node array
- Search Query to Filter Results in React
- React Search or Filter data based on multiple input
- React search filter using select option and useRef
- Adding search filter to an accordion having tables using React
- React table search filter work on console window but in react table it not showing filter data
- react material-table's search filter does not work on render
- filter list based on input field in react using search regular expression
- how to apply the some array method to a filter search in react
- React - Make search and filter work on a given data at same time irrespective of the order of change
- filter data as search based on name from maps in react js
- How to filter a search result in React with filter button?
- Multiple listboxes with multiple values search array filter in React
- Search Filter from json file data in React
More Query from same tag
- Updating input value by updating props
- How to change the state in class component?
- Image sizing not consistent in different browsers
- Authentication to serve static files on Next.js?
- ReactJS: Using one button in child component disables a second button?
- How to get the label value from bar chart in javascript?
- How to create selects and states dynamically on react using Material UI?
- jsPDF - Importing fonts in React.js / ES6 style
- react router onChange
- Routing not working using Gatsby - reach-router
- How can i set the content of reactstrap modal-header in center?
- React: Static method always returns undefined
- Problem of updating the component at a certain event related to time
- How can I toggle only one Reactstrap Collapse?
- How to compile material components web react example
- How to draw square to tag an object. (React Native)
- Uncaught ReferenceError: regeneratorRuntime is not defined in react 17, webpack 5 while making api calls through actions
- Show more info in React
- Center elemement without centering all chidren recursively?
- Reusing websocket connection object in Redux Saga
- Replicating color box in VScode when writing CSS
- Giving border-right causing miss alignment issue
- Is React's data-binding really one way? It seems like it is two way
- Why isn't my parent component re-rendering?
- React - update child when parent state changes, without using componentWillReceiveProps()?
- Update React table after deleting row
- How to debounce user input in reactjs using rxjs
- I am trying to give an active className to mapped data when I click. Currently the previous active class doesn't change when i click on another text
- Change Value of Object Once Added To Array
- Trying to update an array in an object inside of an object. React, useState