Angular 4组合来自多个HTTP请求的数据

Question

我使用的是angular 4，我试图从两个端点获取数据，但我在理解rxjs时遇到了问题。

使用此代码，我只能获得学生和用户的列表。

getStudent() {
return this.http.get(this.url + this.student_url, this.getHeaders()).map(res => res.json());
}
getUsers() {
return this.http.get(this.url + this.users_url, this.getHeaders()).map(res => res.json());
}

假设这是数据：学生

[{"ID" : 1 , "SchoolCode": "A150", "UserID": 1 }, 
{"ID" : 5 , "SchoolCode": "A140" , "UserID": 3}, 
{"ID" : 9 , "SchoolCode": "C140" , "UserID": 4}]

用户

[{"ID" : 1  ,"Name": "Rick" , "FamilyName" , "Grimes" },
{"ID" : 4 ,"Name": "Carle" , "FamilyName" , "Grimes" }]

我想先让所有的学生比较UserID，如果它和用户相同，然后我把两个对象组合成一个，直到我得到这样的数组：

{"ID" : 1 , "SchoolCode": "A150","Name": "Rick" , "FamilyName" , "Grimes" }

我认为我应该使用平面图，但我确实尝试过编写代码，但它对我不起作用，我也没有找到一个具有这种逻辑的例子。

你能帮帮我吗？

Answer 1

您可以在以下代码中使用switchMap运算符(flatMap的别名(：

// Observables mocking the data returned by http.get()
const studentObs = Rx.Observable.from([
{"ID" : 1 , "SchoolCode": "A150", "UserID": 1 }, 
{"ID" : 5 , "SchoolCode": "A140" , "UserID": 4}, 
{"ID" : 9 , "SchoolCode": "C140" , "UserID": 3}
]);
const userObs = Rx.Observable.from([
{"ID" : 1, "Name": "Rick" , "FamilyName": "Grimes" },
{"ID" : 3, "Name": "Tom" , "FamilyName": "Cruise" },
{"ID" : 4, "Name": "Amy" , "FamilyName": "Poehler" }
]);
// Return an observable emitting only the given user.
function getUser(userID) {
return userObs.filter(user => user.ID === userID);
}
studentObs
.switchMap(student => {
return getUser(student.UserID).map(user => {
// Merge the student and the user.
return Object.assign(student, {user: user});
})
})
.subscribe(val => console.log(val));

查看此JSBin：http://jsbin.com/batuzaq/edit?js，控制台

Answer 2

您可以尝试以下操作：

import { forkJoin } from 'rxjs/observable/forkJoin';
interface Student {
id: number;
schoolCode: string;
userId: number;
}
interface User {
id: number;
name: string;
familyName: string;
}
interface Merged {
id: number;
schoolCode: string;
name: string;
familyName: string;
}
getStudents(): Observable<Student[]> {
// Implementation
}
getUsers(): Observable<User[]> {
// Implementation
}
getMerged(): Observable<Merged[]> {
const student$ = this.getStudents();
const users$ = this.getUsers();
const merged$ = forkJoin(student$, users$)
.map(src => src[0].reduce((acc, current) => {
// acc is the accumulated result (list with mapped objects)
// current is an element of the students list
const user = src[1].find(u => u.id === current.userId);
// check if there is a user associated to the current student element
if (user) { // if there is a matching user, push new element to result list
acc.push({
id: user.id,
name: user.name,
familyName: user.familyName,
schoolCode: current.schoolCode
});
}
return acc;
// this could be changed to use a more immutable based approach
}, new Array<Merged>()));
// the seed value to start accumulating results is an empty list
return merged$;
}