I am trying to display Heart icon for the items that are added to the Wishlist. I am using local storage to save the items that are wishlisted. I have an array of id's such as wishlistIds = [123,425,212,512,516]. So I want to check if the id's in that array matches with the array of objects (which are the products). Product array of objects looks like this;

 items = [{id:123, productName:"Cheese", price: 15.99}, {id:599, productName: "Honey", price:21.99}]

I have been trying to use Array.filter method to achieve what I want, but couldn't make it work;

wishlistIds.filter(w => w.id === items.id)

The above code returns me all the ids inside the wishlistIds without filtering the id's inside the the items. What is the correct way to approach this problem?

CodePudding user response：

Create a Set of item IDs and use that to filter the wishlist array

const wishlistIds = [123,425,212,512,516]
const items = [{id:123, productName:"Cheese", price: 15.99}, {id:599, productName: "Honey", price:21.99}]

const itemIds = new Set(items.map(({ id }) => id))

const filteredWishlist = wishlistIds.filter(id => itemIds.has(id))

console.log(filteredWishlist)

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I'm using a Set here as Set.prototype.has() is O(1) time complexity as opposed to Array.prototype.includes() which is O(n).

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#performance

CodePudding user response：

First filter the list, then map it to get just the ID

let wishlistIds = [123,425,212,512,516]
let items = [{id:123, productName:"Cheese", price: 15.99}, {id:599, productName: "Honey", price:21.99}]
let hearts = items.filter(w => wishlistIds.includes(w.id)).map(w => w.id)
console.log(hearts)

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Two things:

Per Spectric's answer, are you actually checking the id of each item in items array?

Separately, you also need to make sure you're saving the result of filter in a new variable because filter doesn't mutate the array it's being used on, but returns a new array entirely.

If that array isn't saved, the filtering is useless.