Extract object with same key from multiple array and make them into one array

Question

I have an array of widgets containing multiple objects. Each object contains an array called cards which contains just a single object. I need help with extracting all the cards object and making a new cards array containing all the cards as elements

{
    "widgets" : [
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        },
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        }
    ]
}

How I want is

{
    "widgets": [
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                },
                {
                    "data": {},
                    "layout": 1
                }
            ]
        }
    ]
}

What have you tried so far? Please show us a [mcve] so we can help you — evolutionxbox, Jul 11 '22 at 13:27
looks like a group by problem. something that can be done similarly https://stackoverflow.com/questions/72621887/group-similar-key-value-pair-to-a-single-array/72622005#72622005 — cmgchess, Jul 11 '22 at 13:29

score 0 · Accepted Answer · answered Jul 11 '22 at 13:44

You can loop over the original object orig and extract it's cards into a new array allCards:

const allCards = [];
for (let widget of orig.widgets) {
    allCards.push(widget.cards[0]); 
}

Then you can construct a new object with these extracted cards.

score 0 · Answer 2 · answered Jul 11 '22 at 13:46

Given your requirement, the below might work.

let x = {
    "widgets" : [
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        },
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        }
    ]
}
let y = {"widgets": [{...x.widgets[0], "cards":[]}]};
x.widgets.forEach(el => y.widgets[0].cards.push(...[].concat(el.cards)));

score 0 · Answer 3 · answered Jul 11 '22 at 13:46

You can try this code that taek into account the type of each widget :

object = {
    "widgets" : [
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        },
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        },
        {
            "type": "Table",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        },
        {
            "type": "Grid",
            "cards": [
                {
                    "data": {},
                    "layout": 1
                }
            ]
        }
    ]
}

new_object = {"widgets" : []}

for (let i=0;  i < object["widgets"].length; i++) {
    exist = false
    for (let j=0;  j < new_object["widgets"].length; j++) {
        if (new_object["widgets"][j]["type"] === object["widgets"][i]["type"]){
            exist = true
            new_object["widgets"][j]["cards"].push(object["widgets"][i]["cards"][0])
        }
    }
    if (exist === false){
        new_object["widgets"].push(object["widgets"][i])
    }
  
}
console.log(new_object)

Extract object with same key from multiple array and make them into one array

3 Answers3