连接两个观察器以按id查找名称

Question

我有两个端点：

users = [
{
id: 1,
name: 'Mark',
companyId: 1
},
{
id: 2,
name: 'Jack',
companyId: 1
},
]

companies = [
{
name: 'Facebook',
id: 1
}
]

现在，我如何建立我的观察者来获得每个用户的公司名称？因此，在我的html中，我可以做例如。user.company.name

我现在的get方法：baseUrl为localhost:3000/users

getUsers(): Observable<IUser[]> {
return this.http.get<IUser[]>(this.baseUrl).pipe(
share()
);
}

Answer 1

使用forkJoin并行获取用户和公司数据，然后将结果映射为所需类型。

forkJoin([
this.http.get<IUser[]>(this.baseUrl + '/users'),
this.http.get<IComapany[]>(this.baseUrl + '/comapnies')
]).pipe(map(([users, companies]) => users.map(user => 
{
return {
"id": user.id,
"name": user.name,
"company": companies.find(x=> x.id == user.companyId)
} 
})
))

示例：https://stackblitz.com/edit/rxjs-wkdn3r

Answer 2

简短的答案是forkJoin。

示例：

const usersObservable = this._http.get('https://example/api/users');
const companiesObservable = this._http.get('https://example/api/companies');
const usersAndCompanies = Observable.forkJoin([usersObservable, companiesObservable])
.subscribe(
result => return this._joinUsersAndCompanies(result) 
);

private _joinUsersAndCompanies(result) {
const users = result[0];
const companies = result[1];
return users.map(user => {
const matchedCompany = companies.find(company => company.Id === user.companyId);

return {
...user,
companyName: matchedCompany!.name
};
});
}

这只是一个草稿，我不确定它是否能正确编译和运行，但我希望你能理解。

如果您需要经常从API获取用户和公司，或者返回数据很大，您可以通过首先将const companies转换并存储在映射中进行优化，以便在恒定时间内访问它们bigO(1)。