Filtering an array in react with multiple values

Question

I'm trying to filter one array so that the objects will display if they match one of the options at the filterOptions (another array).

Example: If filterOptions contains the string big it should show the objects with sizes containing the string big

However, I'm not sure how to split data.sizes correctly so it can use this data to filter with, how can I do this?

https://codesandbox.io/s/thirsty-ellis-dplhg

export const App = () => {
  const data = [
    {sizes: 'big,small',},
    {sizes: 'medium,small'},
    {sizes: 'small,big',},
    {sizes: 'big',},
    {sizes: 'medium',}
  ];

  const filterOptions = ['big', 'small'];
  const splitData = data.map(items => items.sizes.split(','));

  return(
    <div>
      {console.log(splitData)}
      {data.filter(items => items.sizes.includes(filterOptions))
           .map(item => <div>{item.sizes}<br /></div>)}
    </div>
  )
}

So in this case only show sizes containing both big and small, or does sizes: 'big' pass even though 'small' isn't in it? — Yannick K
– Yannick K, Commented Jun 5, 2019 at 20:31
my two cents suggestion: sizes should be an array. sizes: ['big', 'small', 'medium']. In this way, you don't have to split it and it is clearer. Not to mention, sizes: 'small, space__big, __space __space__medium__space____space' will break your code if you don't split and trim. — fangzhzh
– fangzhzh, Commented Jun 5, 2019 at 20:40

fangzhzh · Accepted Answer · 2019-06-05 20:35:07Z

2

this answer can fit as many filter options as possible

data.filter(items => items.sizes.split(',').find(size => filterOptions.includes(size)))

answered Jun 5, 2019 at 20:35

fangzhzh

2,25222 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shidersz · Accepted Answer · 2019-06-06 15:37:03Z

I believe you are looking for:

{data.filter(i => i.sizes.split(",").some(size => filterOptions.includes(size)))
     .map(item => <div>{item.sizes}<br/></div>)}

Example of the filter result:

const data = [
  {sizes: 'big,small'},
  {sizes: 'medium,small'},
  {sizes: 'small,big'},
  {sizes: 'big'},
  {sizes: 'medium'}
];

const filterOptions = ['big','small'];

let res = data.filter(
    i => i.sizes.split(",").some(
        size => filterOptions.includes(size)
    )
);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

However, for your particular set of sizes ("small", "big" and "medium"), where there are no string that is also substring of another string, you can go with the next filter using a regular expression constructed from the filterOptions array:

const data = [
  {sizes: 'big,small'},
  {sizes: 'medium,small'},
  {sizes: 'small,big'},
  {sizes: 'big'},
  {sizes: 'medium'}
];

const filterOptions = ['big','small'];

let res = data.filter(
    ({sizes}) => new RegExp(filterOptions.join("|")).test(sizes)
);

console.log(res);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Or, in your context of code:

{data.filter(({sizes}) => new RegExp(filterOptions.join("|")).test(sizes))
     .map(item => <div>{item.sizes}<br/></div>)}

Yannick K · Accepted Answer · 2019-06-05 20:40:50Z

0

Here's how you might go about it (there are a lot of different ways to achieve your result though):

const data = [
  { sizes: 'big,small', },
  { sizes: 'medium,small' },
  { sizes: 'small,big', },
  { sizes: 'big', },
  { sizes: 'medium', }
];

const filterOptions = [ "big", "small" ];
const filterData = data.filter( ( { sizes } ) => {
  for ( const filter of filterOptions ) {
    if ( sizes.includes( filter ) ) {
      return true;
    }
  }
} );

console.log( filterData );

This is assuming of course you don't want the data sizes to contain both filterOptions.

answered Jun 5, 2019 at 20:40

Yannick K

5,5223 gold badges13 silver badges21 bronze badges

Comments

Vishnu · Accepted Answer · 2019-06-05 20:53:41Z

0

Are you looking for

const data = [
    {
      sizes: 'big,small',
    },
    {
      sizes: 'medium,small'
    },
    {
      sizes: 'small,big',
    },
    {
      sizes: 'big',
    },
    {
      sizes: 'medium',
    }
  ];

const filterOptions = ['big','small'];

const filterData = data.filter( d => filterOptions.every(f => d.sizes.split(',').includes(f)));

console.log(filterData);

answered Jun 5, 2019 at 20:53

Vishnu

8976 silver badges13 bronze badges

Collectives™ on Stack Overflow

Filtering an array in react with multiple values

4 Answers 4

Comments

Example of the filter result:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Example of the filter result:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related