Call multiple services from angular2 component This is my first Angular2 component, which makes two api calls: the first call  provide the input for the the second one.

The following is my attempt at this code. 

@Component({
      selector: 'result-panel',
      templateUrl: 'panel.component.html',
      styleUrls: ['panel.component.css'],
      providers:[FindIpZoneDataService,ApiService]
    })

    export class PanelComponent
    {
      networkDetail:Array&lt;Network&gt;;
      query = "";
      datafetchservice:any;
      searching:boolean = false;
      rowCount:boolean = false;
      iperror :boolean = false;
      nwerror :boolean = false;
      userinputerror:boolean = false;
      constructor(private dataservice :FindIpZoneDataService){
            this.datafetchservice = dataservice;
      }

      getNetworkDetail(ip:string) {
        this.networkDetail = [];
        this.dataservice.getNetworkDetail(ip)
          .map((response) =&gt; {
            let res: Array&lt;any&gt; = [];
            let extattrs: Array&lt;any&gt; = [];
            res = response.json();
            res.forEach((detail) =&gt; {
              extattrs.push(detail.extattrs);
            });
            return extattrs;
          })
          .map((network:Array&lt;any&gt;) =&gt; {
            console.log(network);
            let result: Array&lt;Network&gt; = [];
            if (network) {
              network.forEach((detail) =&gt; {
                result.push(new Network(detail['SITE Name'].value,
                  detail['InfoSec Security Zone'].value,
                  detail['Network Security Zone'].value,
                  detail['Data Classification'].value));
              });
              return result;
            }
          })
          .subscribe(details =&gt; {
              this.networkDetail = details;
              this.rowCount = true;
              this.searching = false;
            },
            err =&gt; {
              //Valid Network not found
              this.handleNwServiceError(err);
            });
    }
      getIPNetwork(){
        this.datafetchservice.getNetwork(this.query)
          .map(response =&gt; response.json())
          .subscribe(result =&gt; {
              this.getNetworkDetail(result[0].network);
          },
            err =&gt; {
              //InValid IP
              this.handleIpServiceError(err);
            });
      }

      private handleNwServiceError(error: any) {
        //Observable.throw(error.json().error || 'Invalid Network - Server error');
        console.log(error);
        this.nwerror = true;
        this.rowCount = false;
      }

      private handleIpServiceError(error: any) {
        //Observable.throw(error.json().error || 'Invalid IP - Server error');
        console.log(error);
        this.iperror = true;
        this.rowCount = false;
        console.log('ip error');
      }


Please let me know how I can improve it.
Specify types explicitly whenever it's possible (including void for methods and FindIpZoneDataService for datafetchservice instead of any).
Use const instead of let -- it will help detecting unintended assignments.
Try not to move things around when it's not necessary. E.g. the following section is pushing one array's items into another.



let res: Array&lt;any&gt; = [];
let extattrs: Array&lt;any&gt; = [];
res = response.json();
res.forEach((detail) =&gt; {
  extattrs.push(detail.extattrs);
});
return extattrs;



Why do that if simple cast would work? Like this: &lt;T[]&gt;response.json() where &lt;T&gt; is whatever the specific type of the entity returned by the API.


Stylistically, it's better to declare getIPNetwork() before getNetworkDetail() since the code is normally being read top-to-bottom.
When one map() is immediately followed by another map(), they can always be merged into a single one. There is possibility of using flatMap() in addition to that, which would simplify some things but I need better understanding of your context...

getIPNetwork(): void {
    this.datafetchservice
        .getNetwork(this.query)
        .map(response =&gt; response.json())
        .subscribe(
            result =&gt; this.getNetworkDetail(result[0].network),
            err =&gt; this.handleIpServiceError(err) // InValid IP
        );
}

getNetworkDetail(ip: string): void {
    this.networkDetail = [];
    this.dataservice
        .getNetworkDetail(ip)
        .map((response) =&gt; {
            return response
                .json()
                .map(detail =&gt; new Network(
                    detail['SITE Name'].value,
                    detail['InfoSec Security Zone'].value,
                    detail['Network Security Zone'].value,
                    detail['Data Classification'].value
                ));
        })
        .subscribe(
            details =&gt; {
                this.networkDetail = details;
                this.rowCount = true;
                this.searching = false;
            },
            err =&gt; this.handleNwServiceError(err) // Valid Network not found
        );
}

extattrs, nwerror, and similar names are meaningless/hard to decipher.
TypeScript just like JavaScript follows camelCase naming convention. Stick to it. I.e. userinputerror should be userInputError, datafetchservice -- dataFetchService, and so on...