如何通過對象數組中的任何屬性過濾數據？

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