根据条件使用 axios 和 promise 组合 2 个 json 数据集答案

【问题标题】：Combine 2 json data sets using axios and promises based on condition根据条件使用 axios 和 promise 组合 2 个 json 数据集
【发布时间】：2021-08-23 00:07:44
【问题描述】：

我正在使用 axios json 库根据条件组合 2 个数据集。

我的数据：

    let main = [
    {
        "title": "iPhone",
        "details": {
            "ID": "ABC123",
            "link": "https://www.apple.com/iphone/",
        }
    },
    {
        "title": "iPad",
        "details": {
            "ID": "XYZ123",
            "link": "https://www.apple.com/ipad/",
        }
    },
    ];

    let data1 = [
    {
        data: [
        {site: 'google', val1:10, val2:20, val3:30},
        {site: 'bing',   val1:23, val2:12, val3:14},
        {site: 'jeeves', val1:67, val2:78, val3:12},
        {site: 'google', val1:17, val2:19, val3:11},
        {site: 'bing',   val1:13, val2:15, val3:12},
        {site: 'jeeves', val1:69, val2:79, val3:15},
        ],
        gadget: 'iPhone'
    }
    ];

    let data2 = [
    {
        data: [
        {site: 'google', val1:17, val2:51, val3:31},,
        {site: 'bing',   val1:25, val2:15, val3:17},
        {site: 'jeeves', val1:61, val2:71, val3:15},
        {site: 'google', val1:10, val2:20, val3:30},,
        {site: 'bing',   val1:23, val2:12, val3:14},
        {site: 'jeeves', val1:67, val2:78, val3:12},
        ],
        gadget: 'iPad'
    }
    ];

所有 3 个都来自 json url。 data1 和 data2 是基于 gadget 调用的。我不确定如何加入基于来自data... 和main 的gadget 的数据集。

这是我尝试过的：

//AXIOS CANCEL TOKENS
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get(main, {
    cancelToken: source.token
})
.then(function(elem) {
    console.log(elem)
    elem.map(d => {
        return new Promise((rev, err) => 
            $.getJSON(data1, gadget => rev ({
                title: d.title,
                details: d.details,
                data: gadget.data
            })))
    }).then(promises => Promise.all(promises))
    .then(rd => rd.reduce((acc, item) => {
                acc.push(item);
                return acc;
              }, []))
    .then(arr => {
        console.log(arr);
    })
})
.catch(function(error) {
    console.log(error);
});

对于初学者，我收到 elem.map(...).then is not a function 作为错误。另外，我也不确定如何加入基于来自main 的title 和来自gadget 的data 的数据集。

我希望这是我的最终结果：

[
    {
        title: 'iPhone',
        details {
            "ID": "ABC123",
            "link": "https://www.apple.com/iphone/",
        },
        data: [
        {site: 'google', val1:10, val2:20, val3:30},
        {site: 'bing',   val1:23, val2:12, val3:14},
        {site: 'jeeves', val1:67, val2:78, val3:12},
        {site: 'google', val1:17, val2:19, val3:11},
        {site: 'bing',   val1:13, val2:15, val3:12},
        {site: 'jeeves', val1:69, val2:79, val3:15},
        ],
    }
]

和

    [
    {
        title: 'iPad',
        details: {
            "ID": "XYZ123",
            "link": "https://www.apple.com/ipad/",
        }
        data: [
        {site: 'google', val1:17, val2:51, val3:31},,
        {site: 'bing',   val1:25, val2:15, val3:17},
        {site: 'jeeves', val1:61, val2:71, val3:15},
        {site: 'google', val1:10, val2:20, val3:30},,
        {site: 'bing',   val1:23, val2:12, val3:14},
        {site: 'jeeves', val1:67, val2:78, val3:12},
        ],
    }
]

如何使用 axios 做到这一点？数据集可以变得非常大。使用 Axios 将有助于处理异步数据。

【问题讨论】：

标签： javascript ecmascript-6 promise axios es6-promise

【解决方案1】：

你可以这样试试：

const detailRef = main.reduce((obj, item) => {
    obj[item.title] = obj;
    return obj;
}, {})

data1.map((item) => ({data: item.data, ...detailRef[item. gadget]}))
console.log(data1)

data2.map((item) => ({data: item.data, ...detailRef[item. gadget]}))
console.log(data2)

【讨论】：

谢谢，不过我想用 axios。数据集可以变得非常大。这将对异步数据有帮助