Map two separate array objects into one

Question

So I have this scenario where I can have multiple calls to a service which returns some CMS strings and I need to merge all of these arrays together into a single object with one array

an example could be where I fetch two json objects (could be more);

https://www.fakeCmsUrl.com/bundle1 which conains;

{
"Text1":"Random1",
"Text2":"Random2",
"Text3":"Random3"
}

and https://www.fakeCmsUrl.com/bundle2 which conains;

{
"Label1":"weeee1",
"Label2":"weeee2",
"Labe3":"weeee3"
}

and somehow the outcome should be;

{
"Text1":"Random1",
"Text2":"Random2",
"Text3":"Random3",
"Label1":"weeee1",
"Label2":"weeee2",
"Labe3":"weeee3"
}

where they are merged together

So I've written this code where I succesfully merged these seperate calls and json objects to a singlone with two seperate arrays. But I just can't seem to get it to one array..

export async function getCmsBundles() {
    let cmsData = [];
    await
        axios.all([
            axios.get('https://www.fakeCmsUrl.com/bundle2'),
            axios.get('https://www.fakeCmsUrl.com/bundle1 ')
        ]).then(json => {
            Object.keys(json).forEach(res => {
                cmsData.push(json[res])
            })
        })
    console.log('----->', cmsData)
    return cmsData;
}

Treycos · Accepted Answer · 2019-03-05 09:57:01Z

1

If you only plan on using 2 calls, you could deconstruct your array into variables with the arrow function parameters and then merge them into a single object by deconstructing both objects :

export async function getCmsBundles() {
    const cmsData = [];
    await
        axios.all([
            axios.get('https://www.fakeCmsUrl.com/bundle2'),
            axios.get('https://www.fakeCmsUrl.com/bundle1 ')
        ]).then(([bundle1, bundle2]) => {
            cmsData = { ...bundle1, ...bundle2 }
        })

    console.log('----->', cmsData)
    return cmsData;
}

If you do not know how many calls you are going to make, you can use the reduce function instead to build up your object one element by one :

export async function getCmsBundles() {
    const cmsData = [];
    await
        axios.all([
            axios.get('https://www.fakeCmsUrl.com/bundle2'),
            axios.get('https://www.fakeCmsUrl.com/bundle1 ')
        ]).then(data => {
            cmsData = data.reduce((acc, val) => ({ ...val, ...acc }), {})
        })

    console.log('----->', cmsData)
    return cmsData;
}

Working example of the second solution :

const data = [
    {
        "Text1": "Random1",
        "Text2": "Random2",
        "Text3": "Random3"
    },
    {
        "Label1": "weeee1",
        "Label2": "weeee2",
        "Label3": "weeee3"
    },
    {
        "stuff": "thing"
    }
]

const merge = data => data.reduce((acc, val) => ({ ...val, ...acc }), {})

console.log(merge(data))

edited Mar 5, 2019 at 9:57

answered Mar 5, 2019 at 8:56

Treycos

7,4913 gold badges29 silver badges53 bronze badges

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

1 Comment

StrawHat Over a year ago

The issue in this case is that I only want to add a new axios.get(url) and then it should handle the rest for me. in your case I need to add both the url and a new parameter for each new bundle I need to fetch. I want to avoid this scenario

Collectives™ on Stack Overflow

Map two separate array objects into one

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related