JavaScript: filter array of objects by another

Question

I'm trying to filter some objects based on another array of objects. So I'm getting data from an API. These are for example receipts:

[
  {
    "id": 1,
    "name": "test",
    "category": {
        "id": 1,
        "name": "Cookies",
    },
  },
  {
    "id": 2,
    "name": "test2",
    "category": {
        "id": 2,
        "name": "Candy",
    },
  }
]

Then I'm trying to filter the objects on the category name based on another array of categories. I've created a function for this:

function onSelectCategory(category) {
  let receiptsList = receipts.filter((a) =>
    a.category.includes(category.name)
  );
  setReceiptsView(receiptsList);
  setSelectedCategory(category);
}

const category = [ { "id": 2, "name": "Candy" } ];
onSelectCategory(category);

When I run this function, I get an empty Array []. I can't really figure out what I'm doing wrong.

You need to be more clear, what's category param like? is it the array of objects? — Majed Badawi
– Majed Badawi, Commented Feb 26, 2022 at 21:15
@MajedBadawi Thank you for your response, the last code block in my post shows what parameter category is. — Murat
– Murat, Commented Feb 26, 2022 at 21:29
Ok, just to confirm that I understood your problem, you want to keep receipts which category names are in category param items right? — Majed Badawi
– Majed Badawi, Commented Feb 26, 2022 at 21:30
@MajedBadawi Yes, I only want to show the receipts whose category is the same as what comes in via the category param — Murat
– Murat, Commented Feb 26, 2022 at 21:36

Majed Badawi · Accepted Answer · 2022-02-26 21:36:06Z

1

Since the param seems to be an array of objects, you need to use Array#some for comparison instead:

const receipts = [
  { "id": 1, "name": "test", "category": { "id": 1,  "name": "Cookies" } },
  { "id": 2, "name": "test2", "category": { "id": 2, "name": "Candy" } }
];
const categories = [ { "id": 2, "name": "Candy" } ];

const receiptsList = receipts.filter(({ category }) => 
  categories.some(({ name }) => name === category.name)
);

console.log(receiptsList);

Another solution using Set:

const receipts = [
  { "id": 1, "name": "test", "category": { "id": 1,  "name": "Cookies" } },
  { "id": 2, "name": "test2", "category": { "id": 2, "name": "Candy" } }
];
const categories = [ { "id": 2, "name": "Candy" } ];

const categorySet = new Set(categories.map(({ name }) => name));

const receiptsList = receipts.filter(({ category }) => 
  categorySet.has(category.name)
);

console.log(receiptsList);

edited Feb 26, 2022 at 21:36

answered Feb 26, 2022 at 21:13

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

Comments

s2_6348576 · Accepted Answer · 2022-02-26 21:10:32Z

0

Assuming that category (the parameter) is a string, the issue is that you are attempting to get the attribute name from the string, when you should be comparing the string to the object.

Try this:

a.category.name == category;

instead of

a.category.includes(category.name)

I may be wrong aboout assuming that category is a string, please clarify by telling us what the parameter category is equal to.

answered Feb 26, 2022 at 21:10

s2_6348576

1

1 Comment

Murat Over a year ago

Hi, thank you for you help. The Category parameter is equal to an array. See the last piece of code in my post above.

Collectives™ on Stack Overflow

JavaScript: filter array of objects by another

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related