Call multiple services from angular2 component

Question

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<Network>;
      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) => {
            let res: Array<any> = [];
            let extattrs: Array<any> = [];
            res = response.json();
            res.forEach((detail) => {
              extattrs.push(detail.extattrs);
            });
            return extattrs;
          })
          .map((network:Array<any>) => {
            console.log(network);
            let result: Array<Network> = [];
            if (network) {
              network.forEach((detail) => {
                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 => {
              this.networkDetail = details;
              this.rowCount = true;
              this.searching = false;
            },
            err => {
              //Valid Network not found
              this.handleNwServiceError(err);
            });
    }
      getIPNetwork(){
        this.datafetchservice.getNetwork(this.query)
          .map(response => response.json())
          .subscribe(result => {
              this.getNetworkDetail(result[0].network);
          },
            err => {
              //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.

Answer 1

1. Specify types explicitly whenever it's possible (including void for methods and FindIpZoneDataService for datafetchservice instead of any).

2. Use const instead of let -- it will help detecting unintended assignments.

3. 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<any> = [];
let extattrs: Array<any> = [];
res = response.json();
res.forEach((detail) => {
  extattrs.push(detail.extattrs);
});
return extattrs;

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

4. Stylistically, it's better to declare getIPNetwork() before getNetworkDetail() since the code is normally being read top-to-bottom.

5. 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 => response.json())
           .subscribe(
               result => this.getNetworkDetail(result[0].network),
               err => this.handleIpServiceError(err) // InValid IP
           );
   }
   
   getNetworkDetail(ip: string): void {
       this.networkDetail = [];
       this.dataservice
           .getNetworkDetail(ip)
           .map((response) => {
               return response
                   .json()
                   .map(detail => new Network(
                       detail['SITE Name'].value,
                       detail['InfoSec Security Zone'].value,
                       detail['Network Security Zone'].value,
                       detail['Data Classification'].value
                   ));
           })
           .subscribe(
               details => {
                   this.networkDetail = details;
                   this.rowCount = true;
                   this.searching = false;
               },
               err => this.handleNwServiceError(err) // Valid Network not found
           );
   }
   

6. extattrs, nwerror, and similar names are meaningless/hard to decipher.

7. TypeScript just like JavaScript follows camelCase naming convention. Stick to it. I.e. userinputerror should be userInputError, datafetchservice -- dataFetchService, and so on...