Flatten array of objects having arrays nested within their properties

Question

Currently I have an array that contains my clothing (fictitious data):

myClothes = [
    {
        type: 'shirts',
        pieces: [
            {
                brand: 'patagonia',
                quantity: 6,
            },
            {
                brand: 'hugo boss',
                quantity: 3,
            },
        ],
    },
    {
        type: 'trousers',
        pieces: [
            {
                brand: 'jack & jones',
                quantity: 2,
            },
            {
                brand: 'zara',
                quantity: 4,
            },
            {
                brand: 'versace',
                quantity: 1,
            },
        ],
    },
    {
        type: 'socks',
        pieces: [
            {
                brand: 'no-name',
                quantity: 12,
            },
        ],
    },  
];

As you see, the array contains objects (shirts, trousers, socks), that seperate the clothing by their type. Now, what can I do with javascript to make a new array of that which looks like this below here? So where just all pieces are unseperated from shirts/trousers/socks, and it should just show how much articles I have of the brand.

allPiecesUnseperated = [
    {
        brand: 'patagonia',
        quantity: 6,
    },
    {
        brand: 'hugo boss',
        quantity: 3,
    },
    {
        brand: 'jack & jones',
        quantity: 2,
    },
    {
        brand: 'zara',
        quantity: 4,
    },
    {
        brand: 'versace',
        quantity: 1,
    },  
    {
        brand: 'no-name',
        quantity: 12,
    },          
];

Answer 1

Use .flatMap() function

 const myClothes = [ { type: 'shirts', pieces: [ { brand: 'patagonia', quantity: 6 }, { brand: 'hugo boss', quantity: 3 } ] }, { type: 'trousers', pieces: [ { brand: 'jack & jones', quantity: 2 }, { brand: 'zara', quantity: 4, }, { brand: 'versace', quantity: 1 } ] }, { type: 'socks', pieces: [ { brand: 'no-name', quantity: 12 }, ] } ]; const output = myClothes.flatMap(o => o.pieces); console.log(output);

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

Answer 2

 const clothes = [{ type: 'shirts', pieces: [{ brand: 'patagonia', quantity: 6, }, { brand: 'hugo boss', quantity: 3, }, ], }, { type: 'trousers', pieces: [{ brand: 'jack & jones', quantity: 2, }, { brand: 'zara', quantity: 4, }, { brand: 'versace', quantity: 1, }, ], }, { type: 'socks', pieces: [{ brand: 'no-name', quantity: 12, }, ], }, ]; const result = clothes.map(({ pieces }) => pieces).reduce((acc, arr) => [...acc, ...arr], []); console.log(result);

Answer 3

Probably not the most efficient (since concat does create a new array everytime it is invoked) or the most elegant solution, but should get the job done.

var all = []
myClothes.forEach((item) => {
    all = all.concat(item.pieces)
})