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

Question

我正在使用角度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" }

我想我应该使用flatmap,但我确实尝试编写代码,但它不适合我,我没有找到这样的逻辑的例子.

请你帮助我好吗.

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,console