How to Link an Observable Array to Another in Angular 2

Question

How to Link an Observable Array to Another in Angular 2

In my Angular 2 project, I am trying to chain multiple HTTP calls together. Initially, I retrieve an array of environments with one call. For each environment, I want to make another call and create objects like

firstObject[{name:"name",secondObject[stuff,stuff2],name:"name2",secondObject[stuff,stuff2]]

However, when I attempt to use a for loop in the array, the lazy nature of the subscribe function makes it difficult to iterate through each object. It seems that the same index is being used on each of the second subscribes. Below is the code output. Any assistance would be greatly appreciated.

getEnvironments(app:string){
this.loading = true;
console.log("calling get Environments")
 this._appModelService.getEnvironments(app).subscribe(val => 
  {this.environments = val;
    for(var i = 0; i < this.environments.length;++i){
      console.log("Environment name =       "+this.environments[i].EnvName);
         this._appModelService.getAppTypes(app,this.environments[i].EnvName)
      .subscribe(typeVal => 
      {
        console.log("Subscribing to i = "+i);
        console.log(typeVal);
      }

      )
    }

    this.loading = false;
  },

  err => {
  console.log("Something went wrong in get apps");                              // Log errors if any
  console.log(err);
  this.loading = false;

});

  }

Output Below

calling get Environments
app-model.component.ts:93 Environment name = CRT       
app-model.component.ts:93 Environment name = DRP       
app-model.component.ts:93 Environment name = IFT       
app-model.component.ts:93 Environment name = PRD       
app-model.component.ts:93 Environment name = PRE       
app-model.component.ts:93 Environment name = TRN       
app-model.component.ts:97 Subscribing to i = 6
app-model.component.ts:98 [Object, Object, Object]
app-model.component.ts:97 Subscribing to i = 6
app-model.component.ts:98 [Object, Object, Object]
app-model.component.ts:97 Subscribing to i = 6
app-model.component.ts:98 [Object, Object, Object]
app-model.component.ts:97 Subscribing to i = 6
app-model.component.ts:98 [Object, Object, Object]
app-model.component.ts:97 Subscribing to i = 6
app-model.component.ts:98 [Object, Object, Object]
app-model.component.ts:97 Subscribing to i = 6
app-model.component.ts:98 [Object, Object]

Edit The output of my first call should look like this<

[ { EnvName: 'CRT       ' },
{ EnvName: 'DRP       ' },
{ EnvName: 'IFT       ' },
{ EnvName: 'PRD       ' },
{ EnvName: 'PRE       ' },
{ EnvName: 'TRN       ' },

And the output of the second Call will be

[ { ServerTypeName: 'App       ' },
{ ServerTypeName: 'Oracle    ' },
{ ServerTypeName: 'Weblogic  ' } ]

I aim to combine these into a nested object.

angular typescript angular2-observables

Answer 1

Answer №1

Could you provide us with the code for the service?

It is recommended to chain the calls like this:

    this._appModelService.getEnvironments(app).subscribe(
        res => {
            // process data returned from response
            // perform additional action after successful response
            this._appModelService.someOtherCall().subscribe()
        },
        err {},
        ()
    )

If you need to manipulate the same data or combine data in the service, you should consider using flatMap to chain various http requests.

Answer 2

Could you provide us with the code for the service?

It is recommended to chain the calls like this:

    this._appModelService.getEnvironments(app).subscribe(
        res => {
            // process data returned from response
            // perform additional action after successful response
            this._appModelService.someOtherCall().subscribe()
        },
        err {},
        ()
    )

If you need to manipulate the same data or combine data in the service, you should consider using flatMap to chain various http requests.

Answer 3

Answer №2

In case anyone is still searching for a solution to the identical issue mentioned earlier, consider utilizing a forkJoin method.

fetchEnvironments(application:string): Observable<any> {
  this._applicationModelService.fetchEnvironments(application)
  .pipe(
    //transforming fetchEnvironments into...
    mergeMap((environments:any[]) => {
      //a combination of multiple obtainApplicationTypes observables
      return forkJoin(
        environments.map(env => this._applicationModelService.obtainApplicationTypes(application, env.EnvName).pipe(
          map(typeValue => {
            return {/* an alternative approach to merging `env` and `typeValue` */}
          })
        ))
      ).pipe(
        map((typeValues:any[]) => { //final touch to compile response object
          return {/* a method to consolidate all the responses */}
        })
      )
    })
  )
}

Answer 4

In case anyone is still searching for a solution to the identical issue mentioned earlier, consider utilizing a forkJoin method.

fetchEnvironments(application:string): Observable<any> {
  this._applicationModelService.fetchEnvironments(application)
  .pipe(
    //transforming fetchEnvironments into...
    mergeMap((environments:any[]) => {
      //a combination of multiple obtainApplicationTypes observables
      return forkJoin(
        environments.map(env => this._applicationModelService.obtainApplicationTypes(application, env.EnvName).pipe(
          map(typeValue => {
            return {/* an alternative approach to merging `env` and `typeValue` */}
          })
        ))
      ).pipe(
        map((typeValues:any[]) => { //final touch to compile response object
          return {/* a method to consolidate all the responses */}
        })
      )
    })
  )
}

How to Link an Observable Array to Another in Angular 2

Answer №1

Answer №2

Similar questions

The ng-bootstrap package is not fully compatible with Bootstrap 4 Alpha 6, particularly when it comes to collapsible elements such as forms

Guide to setting a generic key restriction on a function parameter

Determine whether a many-to-many relationship involves a specific entity

Oops! An issue occurred: [RunScriptError]: Running "C:Windowssystem32cmd.exe /d /s /c electron-builder install-app-deps" resulted in an error with exit code 1

Change the values of every element in an array

Creating a task management application using Vue 3 Composition API and Typescript with reactivity

The module has defined the component locally, however, it has not been made available for

"Looking to personalize marker clusters using ngx-leaflet.markercluster? Let's explore some ways to customize

What could be causing my NodeJS Backend to not retrieve the data properly?

Unable to assign to 'options' as it is not recognized as a valid property of 'p-multiSelect'

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

Performing an Axios POST request in a React Native and React app using JSON.stringify and Blob functionality

Switching out a traditional class component with a functional component within a hook to deduce properties from T

Error in Typescript: The identifier 'Proxy' is unknown

Managing clearing values/strings for different input types like text/password upon form submission in Angular2

Encountering the error "Missing property '$$typeof' when trying to extend next/link in Next.js using TypeScript"

What steps can be taken to properly set up routing in Angular 4 in a way that organizes feature-modules routes as children in the

Angular: Understanding the intricacies of HTTP calls in ngOnInit versus click events (potentially related to caching mechanisms)

Guide on inserting a template into mat-stepper

Issue with sending headers in HttpClient.post method in Angular 8