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

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

我想合并这两个对象，但我不能，因为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

您可以在users数组上使用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"
}
]