筛选嵌套的JSON对象

问题描述

我有一个搜索栏，您可以在其中键入员工姓名，它应该根据筛选器返回姓名。我有一个嵌套的JSON对象(如下所示)，我需要钻取该对象以访问数组中的员工姓名。

您可以看到我尝试实现的多个选项(它们已被注释掉)我的问题是，代码没有过滤姓名并返回所有姓名，而不是搜索的姓名。我收到此错误TypeError: Cannot read property 'filter' of undefined

以下代码用于访问另一个组件中的员工姓名：

{test.map((result) => (result.details.map((innerArr) => 
  <h5>{innerArr.employee}</h5>
  )))}

如何在以下代码中实现上述功能

      const SearchByEmpComp = () => {
      const [company, setCompany] = useState([
    {
      "company": "HIJ",
      "_id": "610aeaec618ac5902c466541",
      "details": 
      [
          {
              "employee": "Lesley Peden",
              "notes": "Lesley's note",
              "_id": "610aeaec618ac5902c466542"
          },
          {
              "employee": "Wayne Smith",
              "notes": "Wayne's note",
              "_id": "610aeaec618ac5902c466543"
          }
      ],
    },
    {
     "company": "ABC",
     "_id": "61003ff8e7684b709cf10da6",
     "details": 
      [
         {
             "employee": "David Barton",
             "notes": "some note!!",
             "_id": "610aebb2618ac5902c46654e"
         }
      ],
   }
]);
    
  //below code does not work
  //attemp 1
      const test = company.filter((r) => 
      r.details.map((innerArr) => {
      return innerArr.employee.toLowerCase().includes
      (searchField.toLowerCase());
  })
  );
  
  //attemp 1
  //   const test = company.map((el) => {
  //   return {...element, detail: element.detail.filter((details) => 
  //   details.employee.toLowerCase().includes
  //   (searchField.toLowerCase()))}
  //   })

  //attemp 2      
  //   const test = company.filter((res) => {
  //   return res.details.map((innerArr) =>
  //   innerArr.employee.toLowerCase().includes
  //   (searchField.toLowerCase()));
  //  });

  
  //attemp 3
  //   const test = company.filter((comp) =>
  //   comp.details.employee.toLowerCase().includes(searchField.toLowerCase())
  //   );

  const deatils = () => {
    if (searchShow) 
      return <EmpDetailsByName test={test} />
    }
  };

return (
    <>
    <FormControl
      type="search"
      placeholder="Type Customer Name Here"
    />
      <div>
        <Button
          onClick={handleClick}
        >
          Enter
        </Button>
        <div>{deatils()}</div>
      </div
  );
};

呈现名称的代码

 const EmpDetailsByName = ({ test }) => {
  return (
    <>
  {test.map((result) => 
  (result.details.map((innerArr) => 
   <h5>{innerArr.employee}</h5>
  )))}
    </>
  );
};
export default EmpDetailsByName;

推荐答案

除了Werlious的答案外，如果您正在寻找仍将包括在内的公司，则可以如下所示绘制地图。第一个映射仍将返回所有员工已被过滤掉的公司。第二个映射将筛选出没有任何详细信息的公司。

第三种是一种更现代的只返还员工的方法。但有无数种变体可以用来实现这一点。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const company = [
  {
    company: "HIJ",
    _id: "610aeaec618ac5902c466541",
    details: [
      {
        employee: "Lesley Peden",
        notes: "Lesley's note",
        _id: "610aeaec618ac5902c466542",
      },
      {
        employee: "Wayne Smith",
        notes: "Wayne's note",
        _id: "610aeaec618ac5902c466543",
      },
    ],
  },
  {
    company: "ABC",
    _id: "61003ff8e7684b709cf10da6",
    details: [
      {
        employee: "Lesley Peden",
        notes: "some note!!",
        _id: "610aebb2618ac5902c46654e",
      },
    ],
  },
];
const searchField = "les";
//attemp 1
const test = company.map((element) => {
  return {
    ...element,
    details: element.details.filter((details) =>
      details.employee.toLowerCase().includes(searchField.toLowerCase())
    ),
  };
});
console.log("test", test);

const test2 = company
  .map((company) => {
    let details = company.details.filter((detail) =>
      detail.employee.toLowerCase().includes(searchField.toLowerCase())
    );
    if (!details.length) {
      return null;
    }
    return { ...company, details };
  })
  .filter(Boolean);

console.log("test2", test2);

// Modern browser version of filtering to only the employees :)
const test3 = company.flatMap((company) =>
  company.details.filter((detail) =>
    detail.employee.toLowerCase().includes(searchField.toLowerCase())
  )
);
console.log("test3", test3);