How can I group an array of objects in new array?-CodePudding

I have following array


    const arr = [
      {
       Images: [{ id: 1 }, { id: 2 }, { id: 3 }],
       MediaCategoryName: "Exterior",
       id: 51
      },

       {
       Images: [{ id: 7 }, { id: 8 }, { id: 9 }],
       MediaCategoryName: "Construction",
       id: 687
      },

      {
      Images: [{ id: 10 }, { id: 11 }, { id: 21 }],
      MediaCategoryName: "home",
      id: 755
     }
    ];

How can I create new array from them and put only Images ?

I need something like this

newArr = [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 7 }, { id: 8 }
         , { id: 9 }, { id: 10 }, { id: 11 }, { id: 21 }
         ]

Can someone help me to achieve this ?

Thanks :)

CodePudding user response：

using Array.prototype.flatMap()
It is just like doing a map to return images and then performing a flat afterwards

const arr = 
  [ { Images: [{ id:  1}, {id:  2}, {id:  3 }] , MediaCategoryName: 'Exterior',     id:  51 } 
  , { Images: [{ id:  7}, {id:  8}, {id:  9 }] , MediaCategoryName: 'Construction', id: 687 } 
  , { Images: [{ id: 10}, {id: 11}, {id: 21 }] , MediaCategoryName: 'home',         id: 755 } 
  ];


const res = arr.flatMap(({Images}) => Images)

console.log(JSON.stringify(res))

.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}

CodePudding user response：

You can try this code. It'll take each element from arr and takes

out = []
arr.forEach((el)=>{
    x.push(...el.Images)
})