I am stuck showing the cart page where the products are listed which were added to Cart by Users. I have two arrays: One with the product details.
productDetails: [
{
productID: 1,
productTitle: 'Product Title 1',
productPrice: 2000
},
{
productID: 2,
productTitle: 'Product Title 2',
productPrice: 5000
},
{
productID: 3,
productTitle: 'Product Title 3',
productPrice: 1000
},
{
productID: 4,
productTitle: 'Product Title 4',
productPrice: 10000
}
],
Another with Cart Product details which has productID and quantity selected by users only.
cartProducts: [
{
productID: 1,
quantity: 5,
},
{
productID: 3,
quantity: 2,
}
]
I have filtered all the products that the user have selected.
cartItemDetails() {
return this.productDetails.filter(
el => this.cartProducts.some(f => f.id === el.productID),
);
},
This function gives the product details of productID 1 and 3. What i want is a new array that adds the quantity attribute of cartProducts array to productDetails array.
newArray: [
{
productID: 1,
productTitle: 'Product Title 1',
productPrice: 2000,
quantity:5
},
{
productID: 3,
productTitle: 'Product Title 3',
productPrice: 1000,
quantity:5
}
]
I hope i have made my questions clear. I am also trying to solve this issue with map javascript method but its not working.
Regards,
I am stuck showing the cart page where the products are listed which were added to Cart by Users. I have two arrays: One with the product details.
productDetails: [
{
productID: 1,
productTitle: 'Product Title 1',
productPrice: 2000
},
{
productID: 2,
productTitle: 'Product Title 2',
productPrice: 5000
},
{
productID: 3,
productTitle: 'Product Title 3',
productPrice: 1000
},
{
productID: 4,
productTitle: 'Product Title 4',
productPrice: 10000
}
],
Another with Cart Product details which has productID and quantity selected by users only.
cartProducts: [
{
productID: 1,
quantity: 5,
},
{
productID: 3,
quantity: 2,
}
]
I have filtered all the products that the user have selected.
cartItemDetails() {
return this.productDetails.filter(
el => this.cartProducts.some(f => f.id === el.productID),
);
},
This function gives the product details of productID 1 and 3. What i want is a new array that adds the quantity attribute of cartProducts array to productDetails array.
newArray: [
{
productID: 1,
productTitle: 'Product Title 1',
productPrice: 2000,
quantity:5
},
{
productID: 3,
productTitle: 'Product Title 3',
productPrice: 1000,
quantity:5
}
]
I hope i have made my questions clear. I am also trying to solve this issue with map javascript method but its not working.
Regards,
Share Improve this question asked Nov 24, 2019 at 18:59 Sujan ShresthaSujan Shrestha 1,0401 gold badge18 silver badges34 bronze badges7 Answers
Reset to default 4You can use map() after filter() and add quantity property to each item.
const productDetails = [{ productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 }];
const cartProducts = [{ productID: 1, quantity: 5 }, { productID: 3, quantity: 2 }];
function cartItemDetails() {
return productDetails
.filter(el => cartProducts.some(f => f.productID === el.productID))
.map(item => ({
...item,
"quantity": cartProducts.find(f => f.productID === item.productID).quantity
}));
}
console.log(cartItemDetails());Or you can use reduce().
const productDetails = [{ productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 }];
const cartProducts = [{ productID: 1, quantity: 5 }, { productID: 3, quantity: 2 }];
function cartItemDetails() {
return productDetails.reduce((acc, curr) => {
let item = cartProducts.find(f => f.productID === curr.productID);
if (item) {
acc.push({ ...curr,
"quantity": item.quantity
});
}
return acc;
}, []);
}
console.log(cartItemDetails());You can also use map() on cartProducts.
const productDetails = [{ productID: 1, productTitle: 'Product Title 1', productPrice: 2000 }, { productID: 2, productTitle: 'Product Title 2', productPrice: 5000 }, { productID: 3, productTitle: 'Product Title 3', productPrice: 1000 }, { productID: 4, productTitle: 'Product Title 4', productPrice: 10000 }];
const cartProducts = [{ productID: 1, quantity: 5 }, { productID: 3, quantity: 2 }];
function cartItemDetails() {
return cartProducts.map(item => ({
...productDetails.find(f => f.productID === item.productID),
...item
}));
}
console.log(cartItemDetails());Use map and object spread to combine the two arrays:
var newArray = cartProducts.map(cart => ({
...cart,
...productDetails.find(prod => prod.productID === cart.productID)
}));
Convert the productDetails to a Map (productDetailsMap), using the productID as the key.
Iterate the cartProducts with Array.map() get the current product from productDetailsMap by it's productID, and merge by spreading into a new object.
const productDetails = [{"productID":1,"productTitle":"Product Title 1","productPrice":2000},{"productID":2,"productTitle":"Product Title 2","productPrice":5000},{"productID":3,"productTitle":"Product Title 3","productPrice":1000},{"productID":4,"productTitle":"Product Title 4","productPrice":10000}]
const cartProducts = [{"productID":1,"quantity":5},{"productID":3,"quantity":2}]
const productDetailsMap = new Map(productDetails.map(o => [o.productID, o]))
const result = cartProducts.map(o => ({
...productDetailsMap.get(o.productID),
...o
}))
console.log(result)You can try something similar to this:
cartItemDetails() {
return this.cartProducts.map(cp => {
let prod = this.productDetails.find(pd => pd.productID === cp.productID)
return {...cp, ...prod}
})
}
Hope this helps :)
You can use Object.assign() method to copy property-value pairs from productDetails into cartProducts whenever the productID matches:
let productDetails = [
{
productID: 1,
productTitle: 'Product Title 1',
productPrice: 2000
},
{
productID: 2,
productTitle: 'Product Title 2',
productPrice: 5000
},
{
productID: 3,
productTitle: 'Product Title 3',
productPrice: 1000
},
{
productID: 4,
productTitle: 'Product Title 4',
productPrice: 10000
}
];
let cartProducts = [
{
productID: 1,
quantity: 5,
},
{
productID: 3,
quantity: 2,
}
];
cartProducts.map(cart => Object.assign(cart, productDetails.find(product => product.productID === cart.productID)) )
console.log(cartProducts)cartProducts.map(cartProduct => {
return {
...productDetails.find(product => product.productID === cartProduct.productID),
"quantity": cartProduct.quantity
}
});
You could do some null checks if required.
This is what is messing with your code here :
cartItemDetails() {
return this.productDetails.filter(
el => this.cartProducts.some(f => f.id === el.productID),
);
},
f which is a cartProducts item has no property id.
I think what you meant is f.productID instead.
Now here is a way to add the quantity property using the map function :
this.productDetails = cartItemDetails().map((element) => {
for (let e of this.cartProducts) {
if (e.productID === element.productID) return {...element, quantity: e.quantity}
}
})