How to find a value in multilevel Array of objects

Question

I'm trying to implement a search box in which if i start searching for a value it will look for the target in an nested array of objects which is like this:--

[
  {
    "groupId": 1,
    "groupName": "Americas",
    "groupItems": [
      {
        "id": 5,
        "name": "Brazil",
        "parentID": 1,
        "parentName": "Americas"
      },
      {
        "id": 6,
        "name": "Canada",
        "parentID": 1,
        "parentName": "Americas"
      }
    ],
    "isExpanded": false,
    "toggleAllSelection": false
  },
  {
    "groupId": 2,
    "groupName": "APAC",
    "groupItems": [
      {
        "id": 7,
        "name": "Australia",
        "parentID": 2,
        "parentName": "APAC"
      },
      {
        "id": 8,
        "name": "China",
        "parentID": 2,
        "parentName": "APAC"
      }
    ],
    "isExpanded": false,
    "toggleAllSelection": false
  },
  {
    "groupId": 3,
    "groupName": "Europe",
    "groupItems": [
      {
        "id": 9,
        "name": "Belgium",
        "parentID": 3,
        "parentName": "Europe"
      },
{
        "id": 7,
        "name": "Austria",
        "parentID": 2,
        "parentName": "APAC"
      },
      {
        "id": 10,
        "name": "Bulgaria",
        "parentID": 3,
        "parentName": "Europe"
      }
    ],
    "isExpanded": false,
    "toggleAllSelection": false
  }
]

Now i want to search for name property in each groupItems array of objects in group array. and when there is a match my function should return data in same format and as it will be autocomplete so instead of exact match it should be partial match. So if search aus in input box it should return

[{
    "groupId": 2,
    "groupName": "APAC",
    "groupItems": [
      {
        "id": 7,
        "name": "Australia",
        "parentID": 2,
        "parentName": "APAC"
      }],
    "isExpanded": false,
    "toggleAllSelection": false,
},
{
    "groupId": 3,
    "groupName": "Europe",
    "groupItems": [
       {
        "id": 7,
        "name": "Austria",
        "parentID": 2,
        "parentName": "APAC"
      }
    ],
    "isExpanded": false,
    "toggleAllSelection": false
  }

]

Does this answer your question? [Find by key deep in a nested array](https://stackoverflow.com/questions/15523514/find-by-key-deep-in-a-nested-array) — Omri Attiya, Apr 28 '20 at 14:40
So for more information, I have had implemented a solution but I wasn't sure if its right way to do it :-- I'm flattening the array filtering through group items and grouping them again based on parentId. — user1264429, Apr 28 '20 at 14:52

xdeepakv · Accepted Answer · 2020-04-28T14:45:17.447

const findByName = (data, name) => {
  const result = data.reduce((m, { groupItems, ...rest }) => {
    let mapGrpItems = (groupItems || []).filter((item) =>
      item.name.includes(name)
    );
    if (mapGrpItems.length) {
      m.push({ ...rest, groupItems: mapGrpItems });
    }
    return m;
  }, []);
  return result;
};

const findByName = (data, name) => {
  const result = data.reduce((m, { groupItems, ...rest }) => {
    let mapGrpItems = (groupItems || []).filter((item) =>
      item.name.includes(name)
    );
    if (mapGrpItems.length) {
      m.push({ ...rest, groupItems: mapGrpItems });
    }
    return m;
  }, []);
  return result;
};

const data = [{"groupId":1,"groupName":"Americas","groupItems":[{"id":5,"name":"Brazil","parentID":1,"parentName":"Americas"},{"id":6,"name":"Canada","parentID":1,"parentName":"Americas"}],"isExpanded":false,"toggleAllSelection":false},{"groupId":2,"groupName":"APAC","groupItems":[{"id":7,"name":"Australia","parentID":2,"parentName":"APAC"},{"id":8,"name":"China","parentID":2,"parentName":"APAC"}],"isExpanded":false,"toggleAllSelection":false},{"groupId":3,"groupName":"Europe","groupItems":[{"id":9,"name":"Belgium","parentID":3,"parentName":"Europe"},{"id":7,"name":"Austria","parentID":2,"parentName":"APAC"},{"id":10,"name":"Bulgaria","parentID":3,"parentName":"Europe"}],"isExpanded":false,"toggleAllSelection":false}]
console.log(JSON.stringify(findByName(data, "Aus"), null, 2));

score 0 · Answer 2 · answered Apr 28 '20 at 14:42

I would definitely attempt to reason through what you're trying to do before just implementing this. Being able to reason through solutions like this is 99% of the job when it comes to programming.

function filterGroups(filter) {
  const result = [];

  myObj.forEach(group => {
    const filteredGroups = group.groupItems.filter(groupItem => {
      return groupItem.name.toLowerCase().includes(filter);
    });

    if (filteredGroups.length > 1) {
      result.push({
        ...group,
        groupItems: filteredGroups
      });
    }
  });

  return result;
}

score 0 · Answer 3 · answered Apr 28 '20 at 14:46

You can use Arrays.filter for the group items in each outer object in your JSON array to filter out the items which match your search query. You can write something like this:

let autocomplete = (key) => { 
  // arr = Your Data
  let result = []
  arr.forEach(grp=> {
  let out = grp
  let res = grp.groupItems.filter(item => item.name.toLowerCase().includes(key.toLowerCase()))
  if(res.length!=0)
  {
    out.groupItems = res
    result.push(out)}
})
return result

How to find a value in multilevel Array of objects

3 Answers3