Как сделать фильтр массива на React с поиском и параметрами?

Question

[ChrisJonson]

Есть массив из телефонов и ноутбуков.

{
		"id": 1,
		"category": "notebooks",
		"brand": "lenovo",
		"title": "Ноутбук Lenovo G50-30",
	},
	{
		"id": 2,
		"category": "notebooks",
		"brand": "lenovo",
		"title": "Ноутбук Lenovo G70-35",
	},
	{
		"id": 10,
		"category": "phones",
		"brand": "samsung",
		"title": "Смартфон Samsung Galaxy S7 32GB Black Onyx",
	},
	{
		"id": 11,
		"category": "phones",
		"brand": "samsung",
		"title": "Смартфон Samsung Galaxy A3 (2016) Black",
	}

Есть фильтр по поиску в массиве

let filteredData = this.state.data.filter((item) =>{
			return item.title.toLowerCase().indexOf(this.props.filterToChild) !== -1;
		});

filteredData прогоняется по циклу.

Как к этому фильтру добавить фильтрацию по категории и брендам, то есть, чтобы кроме поиска были чекбоксы по категориям "Смартфоны", "Ноутбуки" и по брендам "lenovo", "samsung"?

Answer 1

[lemme]

Я бы сделал универсальный фильтр.

function filterBy(data, field, value) {
	return data.filter(item => item[field] === value);
}

const notebooks = filterBy(this.props.data, 'category', 'notebooks');
const lenovoNotebooks = filterBy(notebooks, 'brand', 'lenovo');

Comments

[ChrisJonson]

Я просто написал снизу еще один фильтр

let filterValues = "lenovo asus".split(" ");
let filtredFiltred = [];

for (let i = 0; i < filterValues.length; i++){
this.state.data.map(item =>
item.brand === filterValues[i] ? filtredFiltred.push(item) : null
)
};

[lemme]

ChrisJonson: можно и так, но со временем(возможно) полей будет больше, а ты просто запутаешься в этой лапше, смотри сам=)

[ChrisJonson]

lemme: ок, спасибо

[lemme]

ChrisJonson: единственное, что нужно доработать фильтр. Ибо я написал его на коленке и даже не тестировал, лишь смысл показал.