Menu
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,
726
To merge elements from one array to another, we must first iterate(loop) through all the array elements. In the loop, we will retrieve each element from an array and insert(using the array push() method) to another array. Now, we can call the merge() function and pass two arrays as the arguments for merging.
The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
In order to merge two arrays, we find its length and stored in fal and sal variable respectively. After that, we create a new integer array result which stores the sum of length of both arrays. Now, copy each elements of both arrays to the result array by using arraycopy() function.
Using filter () Method: In this approach, we filter out elements of the mergedArray on the basis of their first occurrence in the array. We check whether the item occurs first by taking it’s first index with the help of indexOf method. Using Array reduce () Method: In this approach, we take noDuplicates array as our accumulator.
Given an array and the task is to use filter and map function simultaneously to the given array. First lets look at map and filter functions in brief: filter () method: This method returns a new array containing the elements that passes a certain test performed on an original array.
1 Using concat () Method: The concat () method accept arrays as arguments and returns the merged array. ... 2 Using spread operator: Spread operator spreads the value of the array into its constituent elements. ... 3 Using push () Method: The push () method is used with spread operator to pushes the elements of arrays into the existing array. ...
The JavaScript filter() method returns a new array which will be filtered from an original array. You will be performing a certain test on an original array and the elements that pass this test will be returned to the new array using this method. JavaScript filter syntax: myArray – The new array which is going to be returned.
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)If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
