async observable for two different api calls -Angular 8

Question

i have a function that filters a list on add and delete and calls the respective api and binds to the async observable contact$

below is my

html

<ng-container *ngIf="contact$ | async as data; else loader">
</ng-container>

ts file

 userChanges(contactList: any[]) {

    let contactsToDel: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'delete').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {
    
        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToDel.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        this.contact$ = this.contactService.removeBulkContact(this.pubType, this.procuid, this.variantid, idsv, contactsToDel.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));

      }
    });
    let contactsToAdd: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'add').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {

        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToAdd.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        this.contact$ = this.contactService.saveContact(this.pubType, this.procuid, this.variantid, idsv, contactsToAdd.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));

      }
    });

   
  }

service file

  saveContact(pubType: any, procuid: number, variantid: number, idsv: number, contactsToAdd: any): Observable<any> {
    const body = JSON.stringify({ searchType: 'save-contact', pubType: pubType, procuid: procuid, variantid: variantid, idsv: idsv, contactsToAdd });
    console.log("body:",body);
    const endpoint = environment.endpointContacts;
    return this.http
      .post<any>(endpoint, body)
      .pipe(map(data => { return data[0] }), catchError((error) => {
        return of([{ contacts: [], proclist: [], status: error, isError: true }]);
      })
      );
  }

  removeBulkContact(pubType: any, procuid: number, variantid: number, idsv: number, contactsToDelete: any): Observable<any> {
    const body = JSON.stringify({ searchType: 'contact-remove', pubType: pubType, procuid: procuid, variantid: variantid, idsv: idsv, contactsToDelete });
    console.log("body:",body);
    const endpoint = environment.endpointContacts;
    return this.http
      .post<any>(endpoint, body)
      .pipe(map(data => { return data[0] }), catchError((error) => {
        return of([{ contacts: [], proclist: [], status: error, isError: true }]);
      })
      );
  }

issue is i am only able to either save or only delete.. if both calls are made , only save is done and not delete. how do i make sure delete is completed before the save is called ? What am i doing mistake here?

You probably want more information lined up in the typescript snippet, but my guess would be using a rxjs utility to merge the streams together. Here's a good link to the different types of map functions https://blog.angular-university.io/rxjs-higher-order-mapping/ My gut tells me concatMap is probably best since you want to maintain a sequence of events. — Ben Brown, Oct 26 '21 at 17:53

DrakeAnglin · Accepted Answer · 2021-10-27T22:52:08.657

Have one variable and setting both calls to that this.contact$. So the second forEach loop is overriding the value from the previous loop. If you want to use async for this, you will need some refactoring.

  userChanges(contactList: any[]) {
     
    const obsArray$ = [];

    let contactsToDel: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'delete').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {
    
        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToDel.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        const obs$ = this.contactService.removeBulkContact(this.pubType, this.procuid, this.variantid, idsv, contactsToDel.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));
        obsArray$.push(obs$);
      }
    });
    let contactsToAdd: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'add').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {

        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToAdd.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        const obs$ = this.contactService.saveContact(this.pubType, this.procuid, this.variantid, idsv, contactsToAdd.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));
        obsArray$.push(obs$);
      }
    });

   this.contacts$ = forkJoin(obsArray$);
  }

depending on how you use it. in this case it would work. https://stackoverflow.com/questions/50276165/combinelatest-deprecated-in-favor-of-static-combinelatest — DrakeAnglin, Oct 26 '21 at 19:52

async observable for two different api calls -Angular 8

1 Answers1