How to consume an API in each iteration of an array of objects? Angular 12

Question

I have an array of objects with a single property

userProps = [
  {
    userId: '1'
  },
  {
    userId: '2'
  },
  {
    userId: '3'
  },
  {
    userId: '4'
  }
];

now I want to map this array and convert it into a new array, assigning in each iteration the response of consuming the api https://jsonplaceholder.typicode.com/users/{userId}

I have tried something like this:

const newUsersProps = this.userProps.map((user) => this.http.get(`https://jsonplaceholder.typicode.com/users/${user.userId}`));
    console.log(newUsersProps);

and would expect a response like this:

newUsersProps = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "[email protected]",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "[email protected]",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "[email protected]",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  }
];

but, I got:

[Observable, Observable, Observable, Observable]

I have also tried to use rxjs

const newUsersProps = of(this.userProps).pipe(
      map((users) => users.map((user) => this.http.get(`https://jsonplaceholder.typicode.com/users/${user.userId}`)),
      tap((res) => console.log('response', res))
    ));

but I still can't.

Does this answer your question? Angular multiple calls to same API in a loop — Mahdi Zarei
– Mahdi Zarei, Commented Jun 19, 2022 at 11:55
The solution you are looking for a is a combination operator in RxJS. You can learn about the available operators in here: learnrxjs.io/learn-rxjs/operators/combination Pick the one that best suits your requirement. — DineshKP
– DineshKP, Commented Jun 19, 2022 at 12:55

gil · Accepted Answer · 2022-06-19 11:07:06Z

4

what you're looking for is the forkJoin operator. here's how u use it:

const newUsersProps = forkJoin(this.userProps
.map(user => this.http.get(`https://jsonplaceholder.typicode.com/users/${user.userId}`))
.subscribe(console.log)

what the forkJoin operator does under the hood is take an array of observables, wait till everyone has completed, then merge their result into a single observable

answered Jun 19, 2022 at 11:07

gil

2,5731 gold badge23 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

How to consume an API in each iteration of an array of objects? Angular 12

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related