在 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"
        }
    ]