如何在多级对象数组中查找值

Question

我正在尝试实现一个搜索框，如果我开始在其中搜索一个值，它将在嵌套的对象数组中查找目标，如下所示：-[  {    "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  }]现在我想在数组中的每个对象数组中搜索name属性。当有匹配时，我的函数应该以相同的格式返回数据，因为它将自动完成，所以它应该是部分匹配而不是完全匹配。所以如果在输入框中搜索它应该返回groupItemsgroupaus[{    "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  }]

Answer 1

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));

Answer 2

您可以将Arrays.filter用于 JSON 数组中每个外部对象中的组项目，以过滤掉与您的搜索查询匹配的项目。你可以这样写：

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

Answer 3

在实施此之前，我肯定会尝试通过您尝试做的事情进行推理。能够通过这样的解决方案进行推理是编程工作的 99%。

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;

}