Angular - Multiples calls http with foreach using RxJS

Question

This is the first time I use RxJS in my Angular project. I have enough doubts and need some help.

This is my original code

loadOperations() {
    this.operationsListData = [];
    this.operationsList = [];
    this.operationsService.getOperations(this.selectedVariable).subscribe(data => {
      this.operationsData = data;
      if (data.length != 0) {
        const variablesOperations = this.operationsData.map(p => p.variable_operations);
        var arr = Object.getOwnPropertyNames(variablesOperations[0]);
        arr.forEach(clave => {
          var name = variablesOperations[0][clave];
          this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).subscribe(
            data => {
              data.name = variablesOperations[0][clave];
              this.operationsListData.push(data);
            },
          );
        });
      }
    });
  }

getOperationsByUuid(operation: string, uuid: string): Observable<OperationList> {
    ...
    return this.http.get<OperationList>(url);
  }

getOperations(selectedVariables: any): Observable<Operations[]> {
    ....
    return this.http.get<Operations[]>(url);
  }

Now I have used RxJS. This is what I have at the moment. However, it does not get what I need. The problem is the concatMap. In my original code, I have a foreach that goes through the array and calls the service. However, I do not know how to make that piece of code in RxJS or what to put in the return.

var variablesOperations;
const combined = this.operationsService.getOperationsByUuid(this.selectedVariable).pipe(
      switchMap(data => {
        this.operationsData = data;
        if (data.length != 0) {
          variablesOperations = data.map(p => p.variable_operations);
          var arr = Object.getOwnPropertyNames(variablesOperations[0]);
          console.log(arr);
          return of(arr)
        }
      }),
      //This is wrong and it is what I need help with
      concatMap((arrayClaves) => {
        arrayClaves.forEach( clave => {
          this.operationsListService.getOperationsByUuid(variablesOperations[0][clave], clave)
        })
        return null; 
      })
    )

combined.subscribe(
      data => {
        console.log(data);
      },
      err => {
        console.log(err);
      }
    );

To sum up, I need to know how to do the foreach of my original code using RxJS. Can anyone help me?

Answer 1

If you just want to call or do something inside your pipe, you can use tap().

For example:

myObservable.pipe(
   tap(myValue => {
      console.log(myValue);
   }
);

Answer 2

Try this:

this.operationsService.getOperations(this.selectedVariable).pipe(
      tap(data => this.operationsData = data),
      filter(data => data.length != 0),
      map(data => data.map(p => p.variable_operations)),
      switchMap(variablesOperations => {        
        return forkJoin(Object.getOwnPropertyNames(variablesOperations[0]).map(clave => {
            return this.operationsService.getOperationsByUuid(variablesOperations[0][clave], clave).pipe(
                map(data => ({ ... data, name: variablesOperations[0][clave] })),
            );
        }));
      }),
    ).subscribe(operationsListData => this.operationsListData = operationsListData);