如何通过对象数组中的任何属性过滤数据？

Question

我正在尝试用lodash过滤一些数据。

到目前为止，我只通过属性name过滤数据。 并且仅在键入整个短语时才返回结果。 就像有一个键name具有值Marcos Alonso并且您仅在搜索框中键入Marcos ，它不会返回任何内容。 这也是我要实现的东西。 要返回与搜索框中的值匹配的任何值。

数据数组命名为passengersData ，它看起来像这样（ passengersData来自Redux存储）：

[
 {
  "id": 3,
  "name": "Marcos Alonso",
  "address": "Sabana",
  "phone": "712321222",
  "pickup": 0,
  "cardinalpoint": "N",
  "latitude": "9.93683450",
  "longitude": "-84.10991830",
  "timestamp": "2019-02-19 21:23:46",
  "dropofftimestamp": null,
  "pickuptimestamp": null,
  "deleted": null,
  "driver": 1
 },
 ...
]

这是组件：

// imports

const PassengerCardBasedOnRoute = ({
  navigationStore,
  passengersData,
  popupsModalsActionHandler,
  searchParam,
}) => {
  const filterByDropOffTimestamp = data =>
    filter(data, ['dropofftimestamp', null]);

  const componentToRenderBasedOnParams = info => (
    <PassengersInfo
      key={info.id}
      id={info.id}
      cardinalpoint={info.cardinalpoint}
      name={info.name}
      address={info.address}
      datetime={info.timestamp}
      searchParam={searchParam}
      callModal={popupsModalsActionHandler}
    />
  );

  return (
    <>
      <View>
        {passengersData && !searchParam.length && 
         filter(filterByDropOffTimestamp(passengersData), [
              'name',
              searchParam,
            ]).map(info => componentToRenderBasedOnParams(info))
         }
      </View>
    </>
  );
};

export default compose(
  connect(
    store => ({
      passengersData: store.homeScreen.passengersData,
      searchParam: store.homeScreen.searchParam,
    }),
  ),
)(PassengerCardBasedOnRoute);

那么在这种情况下我该怎么做才能正确过滤数据？

Answer 1

您可以过滤掉dropofftimestamp值为null且具有包含搜索字符串的值的属性的数组中的每个对象。

例

 class PassengerCardBasedOnRoute extends React.Component { state = { passengersData: [ { id: 3, name: "Marcos Alonso", address: "Sabana", phone: "712321222", pickup: 0, cardinalpoint: "N", latitude: "9.93683450", longitude: "-84.10991830", timestamp: "2019-02-19 21:23:46", dropofftimestamp: null, pickuptimestamp: null, deleted: null, driver: 1 } ], searchParam: "" }; onChange = e => { this.setState({ searchParam: e.target.value }); }; render() { const { passengersData, searchParam } = this.state; const search = searchParam.toLowerCase(); const filteredData = passengersData.filter(obj => obj.dropofftimestamp === null && Object.keys(obj).some(key => String(obj[key]) .toLowerCase() .includes(search) ) ); return ( <div> <input value={searchParam} onChange={this.onChange} /> {filteredData.map(obj => ( <div key={obj.id}>{JSON.stringify(obj)}</div> ))} </div> ); } } ReactDOM.render(<PassengerCardBasedOnRoute />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 2

您需要使用Lodash吗？

 const data = [ { "id": 3, "name": "Marcos Alonso", "address": "Sabana", "phone": "712321222", "pickup": 0, "cardinalpoint": "N", "latitude": "9.93683450", "longitude": "-84.10991830", "timestamp": "2019-02-19 21:23:46", "dropofftimestamp": null, "pickuptimestamp": null, "deleted": null, "driver": 1 }, { "id": 3, "name": "Marcos Alonso", "address": "Sabana", "phone": "712321222", "pickup": 0, "cardinalpoint": "N", "latitude": "9.93683450", "longitude": "-84.10991830", "timestamp": "2019-02-19 21:23:46", "dropofftimestamp": "2019-02-19 21:23:49", "pickuptimestamp": null, "deleted": null, "driver": 1 } ]; const filterByDropOffTimestamp = data => data.filter(d => d.dropofftimestamp); const fltrd = filterByDropOffTimestamp(data); console.log(fltrd); // length of 1 returned