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?
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?
Share Improve this question asked Dec 6, 2021 at 23:05 RinaelRinael 1555 silver badges12 bronze badges 4-
1
itemsis an array. It has noidproperty. – Spectric Commented Dec 6, 2021 at 23:07 - Do you want to get the intersection of both lists? I.e. the ids of all products that are wishlisted and in the current set of items? – Ruben Helsloot Commented Dec 6, 2021 at 23:07
- @RubenHelsloot correct – Rinael Commented Dec 6, 2021 at 23:09
-
1
probably one solution is
wishlistIds.filter(w =>items.find(item => w.id === item.id) > 0)– Sphinx Commented Dec 6, 2021 at 23:11
2 Answers
Reset to default 3Create 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)I'm using a Set here as Set.prototype.has() is O(1) time plexity as opposed to Array.prototype.includes() which is O(n).
See https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#performance
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)