CODEWITHSUNDEEP
javascriptreactjs
Kostya Polishko
Kostya Polishko

Reputation: 21

Search 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;
    }, []);
  };

Upvotes: 2

Views: 60

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13265

There were a few issues in your recursive search.

  1. Your if, else if, else if chain should be independent. They should really be three if blocks.

  2. 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 childGroupList and list properties 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

Upvotes: 1

Related Questions