Merge two array in JavaScript

Question

How to create single array for same producId but different values of productImage and productImageId with unique productId but having different productImage,productImageId with same productId i want productImage,productImageId should be an array and with same productId.

var arr1 = [
 {
 "productID": 85,
 "productImageID": 24801,
 "productImages": "1588578164781.jpg"
 },
 {
 "productID": 85,
 "productImageID": 24802,
 "productImages": "1588578164783.jpg"
 },
 {
 "productID": 84,
 "productImageID": 24799,
 "productImages": "1588575322312.jpeg"
 },
 {
 "productID": 84,
 "productImageID": 24800,
 "productImages": "1588575322346.png"
 }];
var aar2 = [
 {
 "productID": 85,
 "productTitle": "Product Name",
 "productDesc": "Product Description",
 "productPrice": 140,
 "productComparePrice": 120,
 "isFeatured": 0
 }, {
 "productID": 84,
 "productTitle": "Jeans test",
 "productDesc": "Wrist Black",
 "productPrice": 420,
 "productComparePrice": 12,
 "isFeatured": 1
 }]

I want output as expected below:

output =[
 {
 "productID": 85,
 "productTitle": "Product Name",
 "productDesc": "Product Description",
 "productPrice": 140,
 "productComparePrice": 120,
 "isFeatured": 0,
 "productImages": [
 {
 "productImageID": 24801,
 "productImages": "1588578164781.jpg"
 },
 {
 "productImageID": 24802,
 "productImages": "1588578164783.jpg"
 }
 ]
 },
 {
 "productID": 84,
 "productTitle": "Jeans test",
 "productDesc": "Wrist Black",
 "productPrice": 420,
 "productComparePrice": 12,
 "isFeatured": 1,
 "productImages": [
 {
 "productImageID": 24799,
 "productImages": "1588575322312.jpeg"
 },
 {
 "productImageID": 24800,
 "productImages": "1588575322346.png"
 }
 ]
 }
]

• 0x4b50: can you use a map / object with the ids as keys instead of an array?
• Christian Vincenzo Traina: What did you try?

Answer 1

I think this should work for you. But probably you need to solve it in another way, you can join data queering from the database or if these collections are produced by fronted you can use JavaScript objects to easily get entities by its ID.

const output = aar2.map(product => ({
 ...product,
 productImages: arr1.filter(image => image.productID === product.productID)
}));

• user12948615: This way the productImages property in each product object will also have a productID which if you see in the desired result is not included. Adding a map after the filter, returning only the 2 other properties should do the trick.

Answer 2

You can do it using reduce. Try this:

var arr1 = [{"productID": 85, "productImageID": 24801, "productImages": "1588578164781.jpg"}, {"productID": 85, "productImageID": 24802, "productImages": "1588578164783.jpg"}, {"productID": 84, "productImageID": 24799, "productImages": "1588575322312.jpeg"}, {"productID": 84, "productImageID": 24800, "productImages": "1588575322346.png"}];
var arr2 = [{"productID": 85, "productTitle": "Product Name", "productDesc": "Product Description", "productPrice": 140, "productComparePrice": 120, "isFeatured": 0}, {"productID": 84, "productTitle": "Jeans test", "productDesc": "Wrist Black", "productPrice": 420, "productComparePrice": 12, "isFeatured": 1}];
const res = arr1.reduce((a, c) => {
	const index = a.findIndex(item => item.productID === c.productID);
	
	if (index > -1) {
		a[index].productImages = a[index].productImages || [];
		a[index].productImages.push(c);
	}
	
	return a;
}, arr2);
console.log(res);

.as-console-wrapper{min-height: 100%!important; top: 0;}

Answer 3

 aar2.map(a => {
 let arr1Elements = arr1.filter(b => a.productID === b.productID);
 a.productImages = [];
 arr1Elements.forEach(c => a.productImages.push({ productImageID: c.productImageID, productImages: c.productImages }));
 return a;
 });

Answer 4

const newArray = aar2;
newArray.forEach((item, index) => {
 const id = item.productID;
 const imageArray = arr1.filter((img) => img.productID === id);
 aar2[index].productImages = [];
 imageArray.forEach((img) => {
 delete img.productID; // Remove productID from the array
 aar2[index].productImages.push(img);
 })
});