multiple httpclient post call into foreach loop angular 5

Question

I need to use httpclient into foreach loop. It is possible? What is the right way? Here is my code:

this.attachToDelete.forEach( 
          element => {
            this.documentService.DeleteAttachment(element, this.newDocumentId.toString());
            console.log("upload delete from submit", element);
          }
        );

and this is the method in correspondig service:

public DeleteAttachment(attachmentId: number, documentId: string) {    
    let headers = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/json; charset=utf-8');
    return this.http.post('http://localhost:8080/DocumentAPI/api/document/RemoveAttachment?docId=' + documentId + '&attachmentId='+attachmentId, attachmentId,  { headers: headers }).subscribe(
      data => { 
        if(data)
        console.log("delete attach????", data);
        else{
          console.log('Error occured');
        } 
      }     
    );
  }

user4676340 · Accepted Answer · 2018-03-12 15:08:57Z

12

Since you start, I will elaborate a little :)

You seem to have succeed creating an HTTP call, congratulations on that.

When you create an HTTP call, you create an Observable. Observables are like promises, but they do more.

The thing with observables is, that you need to subscribe to them to trigger them.

This can be done by chaining the HTTP call with subscribe :

this.documentService
  .DeleteAttachment(element, this.newDocumentId.toString())
  .subscribe(response => {...})

response will contain your back-end return.

But what I would advise you, is to makre every HTTP call at once. This can be done by using a method on the prototype of Observable, called forkJoin.

If you use forkJoin, you will need to create an array of calls, like so :

const calls = [];
this.attachToDelete.forEach(element => {
  calls.push(this.documentService.DeleteAttachment(element, this.newDocumentId.toString()));
});
Observable.forkJoin(calls).subscribe(responses => {...});

This time, responses will be an array of each and everyone of your calls, ordered by how you put them into the array.

I hope this helps, if not, feel free to ask anything !

(This means you also need to remove the whole subscribe from your service, because if you don't, you will not return an observable but a subscription)

answered Mar 12, 2018 at 15:08

user4676340

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

6 Comments

user3669577 Over a year ago

Thanks @trichetriche! I try now!

user4676340 Over a year ago

@user3669577 don't edit my post, edit yours or leave me a comment ! And I don't have access to images, so post your stack trace in text so that I can read it !

user4676340 Over a year ago

@user3669577 I try your code, but I get this error: Observable.forkJoin is not a function you need to import the forkjoin with this : import 'rxjs/add/observable/forkJoin';

user3669577 Over a year ago

Forgive me, @trichetriche!! I'm still very cumbersome! Symply I add import 'rxjs/add/observable/forkJoin'; and slightly modified your code. Now all is fine. Many thanks! You're great!

user4676340 Over a year ago

No problem, glad I could help !

|

Lodlaiden · Accepted Answer · 2021-05-18 16:55:35Z

0

An alternate with some more complex behaviors:

  async onDeletePress() {
    let deletedList : Observable<MyObject>[] = [];

    this.selectedArray?.forEach(i_obj => {deletedList.push(this._service.deleteObj(<string>i_obj.Id));});

    forkJoin(deletedList).subscribe(async () => {      
      this.gridObjects = await this.fetchRecentList();
      this._snackBar.open('Objects Deleted', '', { duration: 2000 });
    });
  }

answered May 18, 2021 at 16:55

Lodlaiden

4112 silver badges10 bronze badges

Collectives™ on Stack Overflow

multiple httpclient post call into foreach loop angular 5

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related