Angular RxJS map <Observable[]> with api request

Question

In one of my route resolver, I want to get a list of Animals (Animal[]) returned by an API Call. For each animal, I need an extra API call to get the breed name. I tried this :

return this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
  map(animals => animals.map(animalObs => {
    // return animalObs;
    return animalObs.pipe(
      map((animal: Animal) => {
        animal.ani_breed = this.breedService.get(animal.anb_id).pipe(
          map(breed => {
            return breed.anb_name;
          })
        );
        return animal;
      }),
    );
  })),
);

But I get an error when compiling : Type 'Observable' is not assignable to type 'string'. [2322]

I think I am missing something... Please help!

martin · Accepted Answer · 2018-12-10 09:52:03Z

7

The actual implementation depends on whether you want to run requests in sequence or in parallel but you can do it example like the following:

this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
  mergeMap(animals => {
    const animals$ = animals.map(animal => this.breedService.get(animal.anb_id).pipe(
      map(breed => {
        animal.ani_breed = breed;
        return animal;
      })
    ))

    return forkJoin(...animals$);
  }),
);

answered Dec 10, 2018 at 9:52

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ivanavitdev · Accepted Answer · 2018-12-10 09:58:38Z

2

I think what you need is a mergeMap which merge your current request to another request that will request all the returned animals using forkJoin and combine it together.

  getAnimals = () => this.apiService.get('/api/v1/website/' + environment.web_id + '/useraccount/' + user.id + '/animal').pipe(
    mergeMap(animals =>
      Observable.create((observer: Observer<any[]>) => {
        const animals$ = animals.map(
          animal => this.breedService.get(animal.anb_id).pipe(
            map(breed => {
              return {
                ...animal,
                breed_name: breed.anb_name
              }
            })
          )
        );

        forkJoin(animals$).subscribe(result => {
          observer.next(result);
          observer.complete();
        });
      }))
  );

More about forkJoin and mergeMap

https://www.learnrxjs.io/operators/combination/forkjoin.html

https://www.learnrxjs.io/operators/transformation/mergemap.html

EDIT

What you want to do to get the animal and its breed name is return all of the animals property using spread operator and assign the bread name next to it.

        map(breed => {
          return {
            ...animal,
            breed_name: breed.anb_name
          }
        })

FINAL EDIT

Spread operator allows you to enumerate all of the objects property. it has the same output as the code below but in a different procedure.

  map(breed => {
    animal.breed_name = breed.anb_name;
    return animal;
  })

edited Dec 10, 2018 at 9:58

answered Dec 10, 2018 at 9:30

ivanavitdev

2,9583 gold badges14 silver badges24 bronze badges

4 Comments

lovis91 Over a year ago

Hi @Riyens, thanks for your reply. Doing this just give me the breeds name as result

ivanavitdev Over a year ago

@LouisRocher thats what i see on your implementation. may i know what is your expected output?

lovis91 Over a year ago

I want to have a array of animals with the breed_name as a string one the animal object. Thanks for your time

ivanavitdev Over a year ago

Updated. I hope everything i explained make sense/understand so other ppl can apply it also when they encounter the same problem

Collectives™ on Stack Overflow

Angular RxJS map <Observable[]> with api request

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related