CODEWITHSUNDEEP
angulartypescriptangular2-observables
camccar
camccar

Reputation: 730

Angular 2 how to Chain Observable Array to another observable array

I'm Trying to chain a few http calls together in angular 2. I get an array of environments with one call. And for each of those environments I want to return another array. and create an objects like

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

However when I try to use a for loop in the array, something with the lazy nature of the subscribe makes it hard to iterate through each object. i seems to be the same on each of the second subscribes. I have output below the code. Any help would be 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;

});

  }

Out 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 out put 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 want to combine those into a nested object.

Upvotes: 0

Views: 627

Answers (2)

gwest7
gwest7

Reputation: 1653

If anyone still needs a solution to the same problem as described above. Try using a forkJoin.

getEnvironments(app:string): Observable<any> {
  this._appModelService.getEnvironments(app)
  .pipe(
    //convert getEnvironments into...
    mergeMap((environments:any[]) => {
      //a join of multiple getAppTypes observables
      return forkJoin(
        environments.map(env => this._appModelService.getAppTypes(app, env.EnvName).pipe(
          map(typeVal => {
            return {/* an optional way to combine `env` and `typeVal` */}
          })
        ))
      ).pipe(
        map((typeVals:any[]) => { //post formatting to compile response object
          return {/* a way to combine all the responses */}
        })
      )
    })
  )
}

Upvotes: 0

QT Ray
QT Ray

Reputation: 1424

Can we see the code for the service?

You should be chaining like 

    this._appModelService.getEnvironments(app).subscribe(
        res => {
            // data returned from response
            // after data is returned/was a success
            this._appModelService.someOtherCall().subscribe()
        },
        err {},
        ()
    )

If you need to use the same data or mix data, in the service, you need to use a flatMap to chain different http requests.

Upvotes: 2

Related Questions