我正在使用 angular 4,我尝试从 2 个端点获取数据,但我在理解 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" }
我认为我应该使用平面图,但我确实尝试编写代码,但它对我不起作用,而且我没有找到具有这种逻辑的示例。
你能帮帮我吗
最佳答案
您可以在以下代码中使用 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,console
关于Angular 4 合并来自多个 HTTP 请求的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45993468/