Nested HTTP calls Angular 4

Question

I'm trying to get a response in json where I get an array which contains every declaration, with the user and category in it. I have it fixed statically, but I want to make it dynamic and can't seem to make it work.

EDIT: I'm statically inserting the 'id' in the method, so I'm only getting one declaration. I want to create some sort of loop where i can get back al the declarations which are on http://localhost:8080/declaraties. I've already tried nested http but no succes.

Code:

data.service.ts

    import { Injectable } from '@angular/core';
    import {Http} from '@angular/http';
    import {Observable} from 'rxjs/Observable';
    import 'rxjs/add/observable/forkJoin';
    import 'rxjs/add/observable/of';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/mergeMap';

@Injectable()
export class DataService {

  constructor(private http: Http) { }

  url = 'http://localhost:8080/declaraties/';

  getAllesVanDeclaraties(id: number): Observable<any> {
    return Observable.forkJoin([
      this.http.get('http://localhost:8080/declaraties/' + id).map(res => res.json()),
      this.http.get('http://localhost:8080/declaraties/' + id + '/gebruiker').map(res => res.json()),
      this.http.get('http://localhost:8080/declaraties/' + id + '/categorie').map(res => res.json())
    ])
      .map((data: any[]) => {
          const declaraties: any = data[0];
          const gebruiker: any[] = data[1];
          const categorie: any[] = data[2];
          declaraties.gebruiker = gebruiker;
          declaraties.categorie = categorie;
          return declaraties;
      });
  }
}

row.component.html

<ng-container *ngFor="let decl of data; let i = index;">

    <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
      <th>{{i + 1}}</th>

      <td>{{decl['gebruiker'].naam}}</td>
      <td>{{decl.datumIngediend}}</td>
      <td>{{decl.omschrijving}}</td>
      <td>{{decl['categorie'].naam}}</td>
      <td>&euro; {{decl.bedrag}}</td>

    </tr>......

row.component.ts

import {Component, OnInit} from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import {DataService} from './data.service';

@Component({
  selector: 'app-row',
  templateUrl: './row.component.html',
  styleUrls: ['./app.component.css']
})

export class RowComponent implements OnInit {

  data: any = [];

  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.dataService.getAllesVanDeclaraties(2).subscribe( data => {
      console.log(data);
      this.data.push(data);
    });
  }
}

I've tried to make a nested http request, but I'm getting no responses.

Chandru · Accepted Answer · 2017-12-01 14:28:15Z

1

try like this :

Observable.forkJoin([
    this.http.get('http://localhost:8080/declaraties/' + id),
    this.http.get('http://localhost:8080/declaraties/' + id + '/gebruiker'),
    this.http.get('http://localhost:8080/declaraties/' + id + '/categorie')
])
.subscribe((data: any) => {
    console.log('data[0]', data[0].json())
    console.log('data[1]', data[1].json())
    console.log('data[2]', data[2].json())
})

answered Dec 1, 2017 at 14:28

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

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

Comments

Swoox · Accepted Answer · 2017-12-01 14:38:30Z

1

I would first get all declaraties with:

this.http.get('http://localhost:8080/declaraties/').map(res =>{ 
  const declaraties: any[] = res.json();
  for(let i = 0; i < declaraties.length; i++){
    this.http.get('http://localhost:8080/declaraties/' + declaraties[i].id + '/gebruiker')
             .map(gebruiker =>{ declaraties[i].gebruiker = gebruiker.json(); })      
    this.http.get('http://localhost:8080/declaraties/' + declaraties[i].id + '/categorie')
             .map(categorie=>{ declaraties[i].categorie = categorie.json(); })
  }
  return declaraties;
})

answered Dec 1, 2017 at 14:38

Swoox

3,7602 gold badges23 silver badges32 bronze badges

1 Comment

Thomas Brandhorst Over a year ago

I’m now getting an object as return value. How can I convert this to an array? Also, I want to have an array with al declaraties, and Inside the declaraties I also want to have the gebruiker array nested. Any idea how I can achieve this? The standard json object that Spring provides has the gebruiker url nested inside, so I probably have to do a double subscribe of some sort..

LLai · Accepted Answer · 2017-12-01 14:33:33Z

0

You can create a wrapper method that can handle an array of ids. This method can call your current getAllesVanDeclaraties method to build out http requests for each id

// data.service.ts
getAllesArray(ids: number[]){
    // build out array of observables
    let declarations = ids.map(id => this.getAllesVanDeclaraties(id));

    // call observables in parallel
    return Observable.forkJoin(...declarations);
}

Now when you subscribe to this in your component, you'll get data for multiple ids

// component.ts
this.getAllesArray([1, 2]).subscribe(res => {
    // res[0] is the result from id = 1
    // res[1] is the result from id = 2
});

answered Dec 1, 2017 at 14:33

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Collectives™ on Stack Overflow

Nested HTTP calls Angular 4

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related