Объединяйте результаты двух оставшихся запросов и связывайте их в одном объекте |RxJS + Angular 7

Question

Мне нужна помощь, у меня два запроса на отдых, и мне нужно объединиться в один объект.Итак, мой два запроса мне нужно вызвать:

this.http.get<Observable<Machine>>(Config.urlApi + 'machines')
this.http.get<Observable<MaintenanceState>>(Config.urlApi + 'MaintenanceStates/' + '300000')

Объект, возвращенный из первого запроса (объект массива):

...
        {
        "mccId": 69,
        "mccSerialNum": "300000",
        "mccIsOnline": 0,
        "mccUsrId": 1,
        "mccTypeMachine": "tes",
        "mccEmailCustomer": "xxxx@xxxxx.it",
        "mccVersion": "2.0",
        "mccActivationDate": "2019-02-01T00:00:00",
        "alrAlarms": [],
        "gpsGeolocations": [],
        "hrpHistoryRepo": []
    }
...

Объект, возвращенный из первого запроса:

{
    "mnsId": 22,
    "mnsMccId": 69,
    "mnsOrdinaria": false,
    "mnsBiennaleRfi": false,
    "mnsAnnuale": false,
    "mnsQuinquennale": false,
    "mnsFlag": null
}

Итак, я бы вернулся так:

{
    "mccId": 69,
    "mccSerialNum": "300000",
    "mccIsOnline": 0,
    "mccUsrId": 1,
    "mccTypeMachine": "tes",
    "mccEmailCustomer": "xxxx@xxxxx.it",
    "mccVersion": "2.0",
    "mccActivationDate": "2019-02-01T00:00:00",
    "alrAlarms": [],
    "gpsGeolocations": [],
    "hrpHistoryRepo": [],
    // how to join this in the same object ?
    {
       "mnsId": 22,
       "mnsMccId": 69,
       "mnsOrdinaria": false,
       "mnsBiennaleRfi": false,
       "mnsAnnuale": false,
       "mnsQuinquennale": false,
       "mnsFlag": null
    }
}

Так что я новичок в RxJS и пытаюсь сделать это с помощью rxJS и Angular 7, мне нужно вызвать второй запрос после фильтра mnsMccId по первому запросу и для каждого объекта в массиве мне нужно поместить второй результат запроса.

Мой обучающий код:

const values$ = this.http.get<Observable<Machine>>(Config.urlApi + 'machines')
  .pipe(
    tap(),
    map(res => this.http.get<Observable<MaintenanceState>>(Config.urlApi + 'MaintenanceStates/' + res.mccSerialNumber /*this id got by the first query*/))
  )
  .subscribe(res => {
    console.log('res: ', res);
  });

Ясно, что не работает, труднопонять для меня.Я новый.Спасибо.

Answer 1

Чтобы сделать это реактивно, вы должны сначала получить два потока событий, а затем объединить их на более позднем этапе.

const machines$ = this.http.get<Observable<Machine>>(Config.urlApi + 'machines');

const maintainenceStates$ = this.machines$.pipe(
  mergeMap(m => this.http.get<Observable<MaintenanceState>>(Config.urlApi + 'MaintenanceStates/' + m.mccSerialNum'))
);

const mappedData$ = zip(machines$, maintainenceStates$).pipe(
  map(values => map values here //you get an array of [machine, state])
);

mappedData$.subscribe(console.log);

Answer 2

this.http.get<Observable<Machine>>(Config.urlApi + 'machines')
  .pipe(switchMap(res1 => {
    return this.http.get<Observable<MaintenanceState>>(Config.urlApi + 'MaintenanceStates/' + res1.mccSerialNumber)
      .pipe(map(res2 => ({...res1, ...res2})));
  })).subscribe(console.log);