Сопоставить два отдельных объекта массива в один

Question

Итак, у меня есть такой сценарий, в котором у меня может быть несколько обращений к службе, которая возвращает несколько строк CMS, и мне нужно объединить все эти массивы в один объект с одним массивом

, например, гдеЯ выбираю два объекта JSON (может быть больше);

https://www.fakeCmsUrl.com/bundle1, который содержит;

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

и https://www.fakeCmsUrl.com/bundle2, который содержит;

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

и каким-то образом результат должен быть;

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

, где они объединены вместе

Итак, я написал этот код, где я успешно объединил эти отдельные вызовыи JSON возражает против одиночного с двумя отдельными массивами.Но я просто не могу получить его в один массив ..

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

Answer 1

Если вы планируете использовать только 2 вызова, вы можете деконструировать ваш массив в переменные с параметрами функции стрелки, а затем объединить их в один объект, деконструируя оба объекта:

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

Если вы этого не сделаетеЗная, сколько вызовов вы собираетесь сделать, вы можете использовать вместо этого функцию Reduce, чтобы построить ваш объект один элемент за другим:

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

Рабочий пример второго решения:

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