How to merge multiple arrays in foreach loop in Javascript

You declare the new imageCollection inside the loop.. Thus you create a new array each iteration...

Do it outside and use imageCollection.push(...element.imageData) inside forEach loop

Your array needs to be outside the forEach loop so it is accessible after the forEach is completed.

const imageArray = [
  {
    imageData: [
      'https://via.placeholder.com/50',
      'https://via.placeholder.com/60'
    ]
  },
  {
    imageData: ['https://via.placeholder.com/100']
  },
  {
    imageData: ['https://via.placeholder.com/150']
  }
];

const processImage = function (imageArray) {
  const imageCollection = [];
  imageArray.forEach(element => {
    imageCollection.push(...element.imageData);
  });
  return imageCollection;
};

Expected result for processImage(imageArray)

[
  'https://via.placeholder.com/50',
  'https://via.placeholder.com/60',
  'https://via.placeholder.com/100',
  'https://via.placeholder.com/150'
]

You can assign imageCollection outside of the forEach (but still inside of processImage()). Then in the redefinition of imageCollection inside of the forEach, spread the contents of each previous imageCollection array, followed by the contents of element.imageData. Like so:

//...
processImage() {
  let imageCollection = [];
  imageArray.forEach((element) => {
    imageCollection = [...imageCollection, ...element.imageData];
//...

Full Code for Your Context

const imageArray = [
    {
      imageData: [
        'https://via.placeholder.com/50',
        'https://via.placeholder.com/60'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/100'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/150'
      ],
    }
];

processImage() {
  let imageCollection = [];
  imageArray.forEach((element) => {
    imageCollection = [...imageCollection, ...element.imageData];
    console.log(imageCollection);
    // Expected result 
    //['https://via.placeholder.com/50', 'https://via.placeholder.com/60', 'https://via.placeholder.com/100', https://via.placeholder.com/150]
  });
  console.log('ImageCollection',imageCollection);
}

Full Code for Running Outside of Your Context

const imageArray = [
    {
      imageData: [
        'https://via.placeholder.com/50',
        'https://via.placeholder.com/60'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/100'
      ],
    },
    {
      imageData: [
        'https://via.placeholder.com/150'
      ],
    }
];

function processImage() {
  let imageCollection = [];
  imageArray.forEach((element) => {
    imageCollection = [...imageCollection, ...element.imageData];
    console.log(imageCollection);
    // Expected result 
    //['https://via.placeholder.com/50', 'https://via.placeholder.com/60', 'https://via.placeholder.com/100', https://via.placeholder.com/150]
  });
  console.log('ImageCollect',imageCollection);
}

processImage();

try this,foreach in the object imageData, and saving each value in an array using another Foreach.

    let newImageData = []

    imageArray.forEach((data)=>{

       const imageDataArray = data.imageData
       imageDataArray.forEach(link => {
        newImageData.push(link)
       });
      

  })
  
  const NewImageArray = {imageData:newImageData}
  console.log(NewImageArray)