How to make multiple HTTP requests using For loop? TypeScript

Question

When I click submit, I want to make multiple HTTP requests for every date that I've selected. The code below only assigns the last element of selectedDate to booking.bookDate when I clicked submit.

selectedDate: any = [];
booking: SaveBooking = {
  id: 0,
  roomId: 0,
  buildingId: 0,
  bookDate: '',
  timeSlots: [],
  modules: [],
  semesterId: 0,
};

submit() {
  var result$;

  for (let date of this.selectedDate) {
    this.booking.bookDate = date;
    result$ = this.bookingService.create(this.booking);
  }
}

result$.subscribe(() => {
  ...this.toasty.success()    
});

models > booking.ts:

export interface SaveBooking {
    id: number;
    semesterId: number;
    roomId: number;
    buildingId: number;
    bookDate: string;
    timeSlots: number[];
    modules: number[];
}

services > booking.service.ts:

create(booking) {
  return this.http.post(this.bookingsEndpoint, booking)
    .pipe(map(response => response));
}

If you are the owner of the API, you should think about adding a bulk-insert API endpoint. This way you could send one call to your API with { booking, dates: [date1, date2, ...] } — Shinigami
– Shinigami, Commented Nov 6, 2020 at 21:43
@Shinigami is right. This also solves a lot of problems such as transactions and error handling. — ST-DDT
– ST-DDT, Commented Nov 6, 2020 at 21:45

David G. · Accepted Answer · 2020-11-06 21:53:12Z

1

You should be able to do that with forkJoin like so:

submit() {
  var observables = [];

  for (let date of this.selectedDate) {
    this.booking.bookDate = date;
    // Add each observable in the array
    observables.push(this.bookingService.create(this.booking));
  }

  forkJoin(observables).subscribe((arrayOfResults) => {
    ...
  });
}

You should get back an array with the responses respectively.

answered Nov 6, 2020 at 21:53

David G.

1,55511 silver badges17 bronze badges

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

1 Comment

Max R Over a year ago

The result returns an array but each element in the array have the same last value of selectedDate. I want it to have different dates based on my selectedDate. Do you know how to solve this?

user3366195 · Accepted Answer · 2020-11-07 03:22:58Z

0

You can use mergeMap() and toArray() to make this perform better. ForkJoin would cancel when any of the calls would fail.

submit() {
  const result$ =
  from(this.selectedDate)
  .pipe(
    mergeMap(date => {
      this.booking = {...this.booking, bookDate: date};
      return this.bookingService.create(this.booking);
    }),
    toArray()
  );
}

answered Nov 7, 2020 at 3:22

user3366195

992 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to make multiple HTTP requests using For loop? TypeScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related