arraysjsonreactjsmapping

Map two separate array objects into one


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;
}

Solution

  • 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))