遍历多个对象的属性

Question

I am working on a filter engine for my app. Right now, I am having issues with the iteration between an object data which I need to check against the array of filters the user applies. The final goal is to return the object(s) that match one or multiple filter choices.

Here is my code:

const Results = () => {
const [dataStored, setDataStored] = useState([])
const filterArray = useSelector(state => state.filterArray);
const doctors = useSelector(state => state.doctors);

// let doctorsResult = doctors.map(doctor => doctor.indexOf(filterArray) !== -1 )

// let doctorsResult = doctors.map(doctor => {for(let key of Object.keys(doctor)){
//     if (key === 'price' || key === 'gender' || key === 'language'){
//     // setDataStored([...dataStored, doctor[key]])
//     console.log("dataStored",doctor[key])}
//     //  return (dataStored.indexOf(filterArray) !== -1 )

// }})

let doctorsResult = doctors.map(doctor => {
    Object.keys(doctor).forEach((key) => {
        if (key === 'price' || key === 'gender' || key === 'language') {
            setDataStored([...dataStored, doctor[key]])
            console.log("dataStored", dataStored)
        }
        return (dataStored.indexOf(filterArray) !== -1)
    })
})

Each object has multiple properties, but I only need to check the 'price, gender, and language' values. Properties are not equal, some are just a string, others are an array. So far, I have been able to do the iteration through the properties using for..in and forEach loops. My issue is, I am not able to compare and return any data because it is not an array, therefore, indexOf() gives me an error. When I try setDataStored([...dataStored, doctor[key]]) , the State goes into infinite loop.

I am fairly new to all this. If someone has a better way to achieve this, I will really appreciate it.

Edit:

Here is the shape of filterArray It's a dynamic filter, starts empty and then gets populated

Answer 1

So you want to get the state from two selectors and do some work, then return the result? This is the perfect type of problem for reselect . Reselect is a helper that allows you to memoize expensive calculations regarding state selectors.

https://github.com/reduxjs/reselect

Heres what that could look like for you.

$ yarn add reselect

import React from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';

const filterArraySelector = (state) => state.filterArray;
const doctorsSelector = (state) => state.doctors;

const filteredDoctorsSelector = createSelector(doctorsSelector, filterArraySelector, (filterArray, doctors) => {
  return doctors.filter((doctor) => {
    return filterArray.all((key) => {
      // Do some comparison here, return true if you want to include the doctor in the results
      return doctor[key] !== undefined;
    });
  });
});

const Results = () => {
  const filteredDoctors = useSelector(filteredDoctorsSelector);

  return filteredDoctors.map((doctor) => <span>{doctor}</span>);
};

Alternative Option

Instead of using createSelector to memoize the filtering, you can simply filter the doctors every time you render. Like this:

const Results = () => {
  const filterArray = useSelector((state) => state.filterArray);
  const doctors = useSelector((state) => state.doctors);

  const filteredDoctors = useMemo(
    () =>
      doctors.filter((doctor) => {
        return filterArray.all((key) => {
          // Do some comparison here, return true if you want to return the doctor
          return doctor[key] !== undefined;
        });
      }),
    [doctors, filterArray]
  );

  return filteredDoctors.map((doctor) => <span>{doctor}</span>);
};

Update:

Given a filterArray of values like this:

const filterArray = ['Female', 'English'];

We can update the filter function to test the Objects values against the filterArray values. If any of the attribute values match the filterArray values, then we can include the doctor in the resulting filteredDoctors list.

const Results = () => {
  const filterArray = useSelector((state) => state.filterArray);
  const doctors = useSelector((state) => state.doctors);

  const filteredDoctors = useMemo(() => {
    return doctors.filter((doctor) => {
      return filterArray.some((filter) => {
        return Object.values(doctor).some((value) => value === filter);
      });
    });
  }, [doctors, filterArray]);

  return filteredDoctors.map((doctor) => <span>{doctor}</span>);
};

Update:

After discussion in chat:

const Results = () => {
  const filterArray = useSelector((state) => state.filterArray);
  const doctors = useSelector((state) => state.doctors);

  const filteredDoctors = useMemo(() => {
    return doctors.filter((doctor) => {
      return filterArray.some((filter) => {
        return Object.values(doctor).some((value) => {
          // If the attribute value is an array
          if (Array.isArray(value)) {
            return value.some((value) => value === filter);
          }
          // If the attribute value is an object, get the values from the object
          if (typeof value === 'object') {
            return Object.values(value).some((value) => value === filter);
          }
          // By default, expect the value to be a string
          return value === filter;
        });
      });
    });
  }, [doctors, filterArray]);

  return filteredDoctors.map((doctor) => <span>{doctor}</span>);
};