How can I filter array items by object arrays in ReactJS?

Question

I'm creating an application in React ES6, where I need to filter a list of products by category and type. I have a list of test product data as follows:

const ProductData = [
  {
    id: 1,
    name: 'Product 1',
    categories: ['Cat 1', 'Cat 2'],
    types: ['Type 1', 'Type 3']
  },
  {
    id: 2,
    name: 'Product 2',
    categories: ['Cat 2', 'Cat 3'],
    types: ['Type 1', 'Type 2']
  },
  {
    id: 3,
    name: 'Product 3',
    categories: ['Cat 1', 'Cat 3'],
    types: ['Type 2', 'Type 3']
  },
];

I need to filter the data by categories and type, using preset variables i.e. Cat 1 and Type 2.

I have the following code however I'm aware it's not functioning correctly as the categories and types are arrays within the objects.

const category = 'Cat 1';
const type = 'Type 2';

// need to filter here by both the category and the type
var results=_.filter(ProductData,function(item){
  return item.types.indexOf({type})>-1;
});

How can I change this so it functions as requires? Any help would be much appreciated.

What is your expected output? Post that as well in the question.. — Maniraj Murugan
– Maniraj Murugan, Commented Apr 15, 2020 at 11:05

Shubham · Accepted Answer · 2020-04-15 11:11:13Z

1

update this logic

var results = ProductData.filter(item => {
  return item.categories.includes(category) && item.types.includes(type)
})

answered Apr 15, 2020 at 11:11

Shubham

7794 silver badges14 bronze badges

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

Comments

keikai · Accepted Answer · 2020-04-15 11:06:51Z

Use includes()

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const result = ProductData.filter(
  x => x.categories.includes(category) && x.types.includes(type)
);

const ProductData = [
  {
    id: 1,
    name: "Product 1",
    categories: ["Cat 1", "Cat 2"],
    types: ["Type 1", "Type 3"]
  },
  {
    id: 2,
    name: "Product 2",
    categories: ["Cat 2", "Cat 3"],
    types: ["Type 1", "Type 2"]
  },
  {
    id: 3,
    name: "Product 3",
    categories: ["Cat 1", "Cat 3"],
    types: ["Type 2", "Type 3"]
  }
];
const category = "Cat 1";
const type = "Type 2";

const result = ProductData.filter(x => x.categories.includes(category) && x.types.includes(type));

console.log(result);

Dorian B · Accepted Answer · 2020-04-15 11:08:52Z

0

You can use the .filter() and .includes methods :

const productData = {...}
const category = 'Cat 1'
const type = 'Type 2'

const results = productData.filter(el => el.categories.includes(category) && el. types.includes(type))

answered Apr 15, 2020 at 11:08

Dorian B

3002 silver badges11 bronze badges

Comments

Rajat Verma · Accepted Answer · 2020-04-15 11:12:11Z

0

This should work as expected.

const results = ProductData.filter(item => item.categories.includes('Cat 1') && item.types.includes('Type 2'))

answered Apr 15, 2020 at 11:12

Rajat Verma

3072 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I filter array items by object arrays in ReactJS?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related