将两个单独的数组对象映射为一个

时间:2019-03-05 08:50:50

标签: arrays json reactjs mapping

所以在这种情况下,我可以多次调用返回一些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对象成功合并到具有两个单独的数组的singlone中。但是我似乎无法将其放入一个数组。

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

1 个答案:

答案 0 :(得分: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))