Фильтрация массива в реакции с несколькими значениями
Я пытаюсь отфильтровать один массив, чтобы объекты отображались, если они соответствуют одному из вариантов в filterOptions (другой массив).
Пример: Если filterOptions содержит строку big, должны отображаться объекты с sizes, содержащие строку big
Однако я не уверен, как правильно разделить data.sizes, чтобы он мог использовать эти данные для фильтрации, как я могу это сделать?
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.info(splitData)}
{data.filter(items => items.sizes.includes(filterOptions))
.map(item => <div>{item.sizes}<br /></div>)}
</div>
)
}
мое предложение в два цента: размеры должны быть массивом. размеры: ['большой', 'маленький', 'средний']. Таким образом, вам не нужно разбивать его, и он понятнее. Не говоря уже о размерах: 'small, пространство__большое, __пространство __space__medium__space____space' сломает ваш код, если вы не разделите и не обрежете.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
этот ответ может соответствовать как можно большему количеству параметров фильтра
data.filter(items => items.sizes.split(',').find(size => filterOptions.includes(size)))
Вот как вы можете это сделать (хотя есть много разных способов добиться вашего результата):
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.info( filterData );Это предполагает, конечно, что вы не хотите, чтобы размеры данных содержали обеfilterOptions.
Я считаю, что вы ищете:
{data.filter(i => i.sizes.split(",").some(size => filterOptions.includes(size)))
.map(item => <div>{item.sizes}<br/></div>)}
Пример результата фильтра:
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.info(res);.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}Однако для вашего конкретного набора размеров ("small", "big" и "medium"), где нет строки, которая также является подстрокой другой строки, вы можете использовать следующий фильтр, используя регулярное выражение, построенное из массива filterOptions:
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.info(res);.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}Или, в вашем контексте кода:
{data.filter(({sizes}) => new RegExp(filterOptions.join("|")).test(sizes))
.map(item => <div>{item.sizes}<br/></div>)}
Вы ищете
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.info(filterData);
Таким образом, в этом случае показываются только размеры, содержащие обе, большие и маленькие, или
sizes: 'big'проходит, даже если в нем нет слова «маленький»?