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