Angular switchMap sending undefined data to service

Question

I have two observable called: callbacks and system.

I want to merge some data, so in my callback I have the property "systemId" and in my system I have the the property "name"

CallbackObservable:

this.callbacksService.toGetAllCallbacks().subscribe(callbacks => console.log(callbacks));

Result : One Array of object

[{...}]
0:
id: "555"
name: "teste 2 "
systemId: "123"

SystemObservable:

this.sistemaService.toGetSistemaById('123').subscribe(nome => console.log(nome));

Result: One Object

  {
    id: '123',
    name: 'teste',
   }

I want the result to be an array of callbacks with the id and name of the system like this:

{
id: "555"
name: "teste 2"
systemId: "123"
systemName: "teste"
}

So I tried using switchMap operator:

 this.callbacksService.toGetAllCallbacks().pipe(
      switchMap((element) => {
        return this.sistemaService.toGetSistemaById(element.systemId);
      })
    ).subscribe(data => {
      this.dado = data
      console.log(this.dado);
    });

It didn't work because on my second call to the service, it's sending 'undefined' and I don't know why.

Am I using switchmap in a wrong way?

the first observable is emitting an array as you mentioned, but you are trying to access systemId which is undefined. — Munzer, Dec 20 '21 at 06:54
You should do `switchMap(element => this.sistemaService.toGetSistemaById(element))` — Naren, Dec 20 '21 at 09:14
Which is the best way to map inside the element property and then call the service? — Desenv Junior, Dec 20 '21 at 13:06

tufonas · Answer 1 · 2021-12-21T08:41:56.843

0

The first call this.callbacksService.toGetAllCallbacks() returns an array, so when you try to pass element.systemId this is undefined. So if i understood correctly you want to merge each array of the first call with the corresponding response from the second call. I dont know if this solution is the best, but it works:

this.callbacksService
  .toGetAllCallbacks()
  .pipe(
    mergeMap((data) => data),
    concatMap((element) => {
      return this.sistemaService.toGetSistemaById(element.systemId)
       .pipe(
        switchMap((elem) => {
          element.systemName = elem.name;
          return of(element);
        })
      );
    }),
    toArray()
  )
  .subscribe((data) => {
    this.dado = data;
    console.log(this.dado);
  });

edited Dec 21 '21 at 08:41

answered Dec 20 '21 at 09:07

tufonas

303
1
7

thank you for you answer, I tried but got the same error – Desenv Junior Dec 20 '21 at 17:14
Yes, you are right, i made an edit, check now – tufonas Dec 21 '21 at 08:43

Angular switchMap sending undefined data to service

1 Answers1