在 vue 中连接从 axios 请求获得的 2 个 object

Question

有通过位置 ID 获取的用户数据。 位置数据如下所示

locations = ([
         { "name" : "St Skid row" , "id" : 1},
         { "name" : "St Manhatan" , "id" : 2},
         { "name" : "St Golf" , "id" : 3}
      ])

假设数据库中的用户数据看起来像这样

users = [
{"name" : "rikardo", "locationId" : 1},
{"name" : "valention", "locationId" : 1},
{"name" : "marcello", "locationId" : 2},
{"name" : "Ronaldo", "locationId" : 2},
{"name" : "Adriano", "locationId" : 3},
]

然后通过位置 id 获取用户

userBylocationIds.value = await axios.post(`${API_ORIGIN}/auth/v1/user/location`,locationIds

返回数据看起来像这样

dataUsersByLocationId = [
   {"name" : "rikardo" },
   {"name" : "valention" },
   {"name" : "marcello" },
   {"name" : "Ronaldo" },
   {"name" : "Adriano" },
]

我想结合 object，但我不能因为 dataUsersByLocationId 没有包含位置 ID

预计加入后

expected = [
   {"name" : "rikardo" ,"location": "St Skid row"}
   {"name" : "valention" ,"location": "St Skid row"}
   {"name" : "marcello" ,"location": "St Manhatan"} 
   and so on
]

Answer 1

您可以在用户数组上使用 Array.reduce 并获取用户和位置的组合数组

const combineArray = users.reduce((pre, cur) => {
    const userLocation = locations.filter(loc => loc.id === cur.locationId)[0];
    pre.push({name: cur.name, location: userLocation.name});
    return pre;
}, []);

返回值：

[
        {
            "name": "rikardo",
            "location": "St Skid row"
        },
        {
            "name": "valention",
            "location": "St Skid row"
        },
        {
            "name": "marcello",
            "location": "St Manhatan"
        },
        {
            "name": "Ronaldo",
            "location": "St Manhatan"
        },
        {
            "name": "Adriano",
            "location": "St Golf"
        }
    ]