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"
      }
    ]
  }
]

can you use a map / object with the ids as keys instead of an array? — 0x4b50
– 0x4b50, Commented May 5, 2020 at 9:55

Nazar Litvin · Accepted Answer · 2020-05-05 10:30:52Z

2

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)
}));

edited May 5, 2020 at 10:30

answered May 5, 2020 at 9:58

Nazar Litvin

7786 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user12948615 Over a year ago

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.

Sajeeb Ahamed · Accepted Answer · 2020-05-05 09:58:47Z

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;}

user12948615 · Accepted Answer · 2020-05-05 10:06:51Z

0


    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;
    });

answered May 5, 2020 at 10:06

user12948615

Comments

Nil Vila · Accepted Answer · 2020-05-05 10:17:57Z

0

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);
  })
});

answered May 5, 2020 at 10:17

Nil Vila

594 bronze badges

Collectives™ on Stack Overflow

Merge two array in JavaScript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related