Как я могу фильтровать данные по любому свойству в массиве объектов? - PullRequest
Новая
       9

Как я могу фильтровать данные по любому свойству в массиве объектов?

0 голосов
/ 23 февраля 2019

Я пытаюсь отфильтровать некоторые данные с помощью 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);

Так что я могу сделать, чтобы в этом случае правильно отфильтровать данные?

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Вы можете отфильтровать каждый объект в массиве, который имеет 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>
0 голосов
/ 23 февраля 2019

Вам нужно использовать 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
...