title: ExpressJS/Typescript - Unabe to Retrieve ZoneAwarePromise value?
body: <p><strong>UPDATE 1 STARTS</strong></p>
  
  <p>Issue is that I am not able to get all the cities and locations in sequence once I draw the FormArray again and this is becuase of the loop only. Anyways, I am new to TS, you might understand much better. Thanks again.</p>
  
  <pre><code>import { Component, OnInit, NgZone } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from '@angular/forms';
  import { CustomValidators } from 'ng2-validation';
  import { SharedService } from '../../../layouts/shared-service';
  import { MdSnackBar, MdSnackBarConfig, MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
  // Added employee services
  import { VehiclePlanService } from '../../../service/vehicle-plan.service';
  import { PlanService } from '../../../service/plan.service';
  import { LocationService } from '../../../service/location.service';
  import { VehicleMakeService } from '../../../service/vehicle-make.service';
  import { CommonService } from '../../../service/common.service'; // call the common services
  import { PlanInterface } from './plans.interface';
  
  import 'rxjs/add/operator/toPromise';
  
  declare var $: any;
  @Component({
    selector: 'app-vehicle-plan',
    templateUrl: './vehicle-plan.component.html',
    styleUrls: ['./vehicle-plan.component.scss']
  })
  export class VehiclePlanComponent implements OnInit {
  
      pageTitle: "Vehicle Plan";
      _id : string = this.route.snapshot.params['id'];
  
      public form: FormGroup;
  
      plansElement = {};   sessionData = {}; activePlans = {}; activeMake = {}; loc = {}; city = {}; locationNames = {};
      activePlanKey = []; activeMakeKey = []; locKey = []; cityKey = []; value = []; planVals = [];
      securityDeposit :  string ; fuleLevel : string; bookinH : string; bookingCycle : string; freeKm : string; grace : string; resVP: string;
      planDetails: string; vehicleDetails: string; vehicleID: string; planID: string; 
      planName: string ; makeName : string;
  
      constructor(        private fb: FormBuilder,
                          private _sharedService: SharedService, 
                          private router: Router,
                          private route: ActivatedRoute,
                          public snackBar: MdSnackBar,
                          public dialog: MdDialog,
                          private vpService: VehiclePlanService,
                          private plan: PlanService,
                          private locationService: LocationService,
                          private vmService: VehicleMakeService,
                          private commonService : CommonService
                      ) {
                          this._sharedService.emitChange(this.pageTitle);
                          this.commonService.getSession().then((res) =&gt; {
                          this.sessionData = res['data'];
                      });
          }
  
      ngOnInit() {
          this.getActivePlans();
          this.getActiveVehicleMake();
          this.getCityForPlan();
          this.getLocForPlan();
          this.planName= '' ; this.makeName = '';
          this.form = this.fb.group({ 
              plan_name:              [null, Validators.required],
              vehicle_make:           [null, Validators.required],
              rate_per_additional_km: [null, Validators.required],
              rate_per_plan:          [null, Validators.required],
              planArray: this.fb.array([
                  this.initPlans([]),
              ])
          })
  
      }
  
      // Operate vehiclemake to add / edit
      actionVP(model: PlanInterface) {
  
          let formData = model["value"];
          var pa = model["value"].planArray;
  
          for(let i=0; i&lt;pa.length;i++) {
              if(pa[i].location_name != null) {
                  let vp = {
                      'vehicle_make': [{
                          "id" : formData.vehicle_make,
                          "make_name" : this.vehicleDetails
                      }],
                      'plan_name': [{
                          "id" : formData.plan_name,
                          "plan_name" : this.planDetails
                      }],
                      'location': [{
                          "id" : "1",
                          "location_name" : pa[i].location_name,
                          "city" : pa[i].city,
                          "lat" : "0.00",
                          "long" : "0.00"
                      }],
                      'plan_rate': (pa[i].rate_plan != null) ? pa[i].rate_plan : formData.rate_per_plan,
                      'total_free_km': (pa[i].total_free_km != null) ? pa[i].total_free_km : this.freeKm,
                      'additional_km_charges': (pa[i].additional_km_charges != null) ? pa[i].additional_km_charges : formData.rate_per_additional_km,
                      'minimum_hours': (pa[i].minimum_hours != null) ? pa[i].minimum_hours : this.bookinH,
                      'booking_cycle': (pa[i].booking_cycle != null) ? pa[i].booking_cycle : this.bookingCycle,
                      'rate_fuel_level': (pa[i].rate_fuel_level != null) ? pa[i].rate_fuel_level : this.fuleLevel,
                      'grace_period': (pa[i].grace_period != null) ? pa[i].grace_period : this.grace,
                      'security_deposit': (pa[i].security_deposit != null) ? pa[i].security_deposit : this.securityDeposit,
                      "organization" : [{
                          "id" : "1",
                          "name" : "Driven"
                      }],
                      'modified_date': new Date()
                  };
  
                  // SAVE DATA START
                  if(this.route.snapshot.params['id']) {
                      this.updateVP(this.route.snapshot.params['id'], vp);
                  } else {
                      this.saveVP(vp);
                  }
                  // SAVE DATA END
  
              }
          }
      }
  
      // Insert data to vehiclemake
      saveVP(vp) {
          // Build data JSON
          vp['created_date'] = new Date();
          this.vpService.saveVehiclePlan(vp).then((result) =&gt; {
              let id = result['data']['_id'];
              this.openSnackBar("Saved vehicle plan successfully", "");
              this.router.navigate(['/driven/vehicle-plan']);
          }, (err) =&gt; {
              this.openSnackBar("Something went wrong! vehicle plan not saved", "");
              console.log(err);
          });
      }
  
      // Update vehiclemake details
      updateVP(id, vp) {
          this.vpService.updateVehiclePlan(id, vp).then((result) =&gt; {
              let id = result['data']['_id'];
              this.openSnackBar("Updated vehicle plan successfully", "");
              this.router.navigate(['/driven/vehicle-plan']);
          }, (err) =&gt; {
              this.openSnackBar("Something went wrong! vehicle plan not updated", "");
              console.log(err);
          });
      }
  
      // Get the all active plans
      getActivePlans() {
          this.plan.getActivePlans().then((res) =&gt; {
           if(res['status'] == 'success'){
              this.activePlans = res['data'];     
              this.activePlanKey = Object.keys(this.activePlans);
            }else{
                this.openSnackBar(res['data']['message'], "");
            }         
          }, (err) =&gt; {
                  console.log(err);
          });
      }
  
      // Get the all active plans
      getActiveVehicleMake() {
          this.vmService.getActiveVehicleMake().then((res) =&gt; {
           if(res['status'] == 'success'){
              this.activeMake = res['data'];      
              this.activeMakeKey = Object.keys(this.activeMake);
            }else{
                this.openSnackBar(res['data']['message'], "");
            }         
          }, (err) =&gt; {
                  console.log(err);
          });
      }
      // Get the all Locations for plans gruped by city
      getCityForPlan() {
          this.locationService.getCityForPlan().then((res) =&gt; {
           if(res['status'] == 'success'){
              this.city = res['data'];        
              this.cityKey = Object.keys(this.city);
            }else{
                this.openSnackBar(res['data']['message'], "");
            }         
          }, (err) =&gt; {
                  console.log(err);
          });
      }
  
      async getLocForPlan() {
          let res = await this.locationService.getLocForPlan();
          if(res['status'] == 'success') {
              this.loc = res['data'];
              this.locKey = Object.keys(this.loc);
              this.addEditValues();
          } else {
              this.openSnackBar(res['data']['message'], "");
          }
      }
  
      // used to display the alert message 
      openSnackBar(message: string, action: string) {
          this.snackBar.open(message, action, {
              duration: 2000,
          });
      }
  
      initPlans(planVals) {
          //console.log(planVals);
          return this.fb.group({
              city_name:              [planVals['city_name']],
              city :                  [planVals['city']],
              is_active:              [planVals['is_active']],
              location_name:          [planVals['location_name']],
              rate_plan:              [planVals['rate_plan']],
              total_free_km:          [planVals['total_free_km']],
              additional_km_charges:  [planVals['additional_km_charges']],
              minimum_hours:          [planVals['minimum_hours']],
              booking_cycle:          [planVals['booking_cycle']],
              rate_fuel_level:        [planVals['rate_fuel_level']],
              grace_period:           [planVals['grace_period']],
              security_deposit:       [planVals['security_deposit']]
          });
      }
  
      addEditValues() {
          let len = this.locKey.length;
          const control = &lt;FormArray&gt;this.form.controls['planArray'];
          if(len) { control.removeAt(0); }
          for(let i=0;i&lt;len;i++) {
              // DEFAULT NULL
              this.planVals['city'] = null;
              this.planVals['location_name'] = null;
              this.planVals['is_active'] = null;
              this.planVals['rate_plan'] = null;
              this.planVals['total_free_km'] = null;
              this.planVals['additional_km_charges'] = null;
              this.planVals['minimum_hours'] = null;
              this.planVals['booking_cycle'] = null;
              this.planVals['rate_fuel_level'] = null;
              this.planVals['grace_period'] = null;
              this.planVals['security_deposit'] = null;
              // DEFAULT NULL
              this.planVals['city_name'] = this.loc[i]._id[0];
              let lenInner = this.loc[i].locations.length;
              for(let k=0;k&lt;lenInner;k++) {
                  if(this.loc[i].locations[k].is_active) {
                      // UPDATED DATA FROM DB
                      if(this.planID &amp;&amp; this.vehicleID) {
                          this.planVals['city'] = this.loc[i].locations[k].city[0];
                          this.planVals['location_name'] = this.loc[i].locations[k].location_name;
                          this.getVPDetails(this.planID,this.vehicleID,this.planVals['location_name'],this.planVals['city']).then((res: any) =&gt; {
                              console.log(res);
                              if(res['status'] == 'success') {
                                  if(k==0) {
                                      this.planVals['city_name'] = this.loc[i]._id[0];
                                      control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
                                  }
                                  // FROM DB
                                  this.planVals['rate_plan'] = res['data'][0]['plan_rate'];
                                  this.planVals['total_free_km'] = res['data'][0]['total_free_km'];
                                  this.planVals['additional_km_charges'] = res['data'][0]['additional_km_charges'];
                                  this.planVals['minimum_hours'] = res['data'][0]['minimum_hours'];
                                  this.planVals['booking_cycle'] = res['data'][0]['booking_cycle'];
                                  this.planVals['rate_fuel_level'] = res['data'][0]['rate_fuel_level'];
                                  this.planVals['grace_period'] = res['data'][0]['grace_period'];
                                  this.planVals['security_deposit'] = res['data'][0]['security_deposit'];
                                  // FROM DB
                                  this.planVals['city_name'] = null;
                                  this.planVals['is_active'] = this.loc[i].locations[k].is_active;
                                  this.planVals['city'] = this.loc[i].locations[k].city[0];
                                  this.planVals['location_name'] = this.loc[i].locations[k].location_name;
                                  control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
                              } else {
                                  if(k==0) {
                                      this.planVals['city_name'] = this.loc[i]._id[0];
                                      control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
                                  }
                                  // BLANK DATA AT FIRST
                                  this.planVals['rate_plan'] = null;
                                  this.planVals['total_free_km'] = null;
                                  this.planVals['additional_km_charges'] = null;
                                  this.planVals['minimum_hours'] = null;
                                  this.planVals['booking_cycle'] = null;
                                  this.planVals['rate_fuel_level'] = null;
                                  this.planVals['grace_period'] = null;
                                  this.planVals['security_deposit'] = null;
                                  // BLANK DATA AT FIRST
                                  this.planVals['city_name'] = null;
                                  this.planVals['city'] = this.loc[i].locations[k].city[0];
                                  this.planVals['is_active'] = this.loc[i].locations[k].is_active;
                                  this.planVals['location_name'] = this.loc[i].locations[k].location_name;
                                  control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
                              }
                          });
                      } else {
                          if(k==0) {
                              this.planVals['city_name'] = this.loc[i]._id[0];
                              control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
                          }
                          // BLANK DATA AT FIRST
                          this.planVals['rate_plan'] = null;
                          this.planVals['total_free_km'] = null;
                          this.planVals['additional_km_charges'] = null;
                          this.planVals['minimum_hours'] = null;
                          this.planVals['booking_cycle'] = null;
                          this.planVals['rate_fuel_level'] = null;
                          this.planVals['grace_period'] = null;
                          this.planVals['security_deposit'] = null;
                          // BLANK DATA AT FIRST
                          this.planVals['city_name'] = null;
                          this.planVals['city'] = this.loc[i].locations[k].city[0];
                          this.planVals['is_active'] = this.loc[i].locations[k].is_active;
                          this.planVals['location_name'] = this.loc[i].locations[k].location_name;
                          control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
                      }
                  }
              }
          }
      }
  
      removeFormArray() {
          this.planVals = [];
          const control = &lt;FormArray&gt;this.form.controls['planArray'];
          for (var i = control.length - 1; i &gt; 0; i--) {
              this.removeInput(i);
          }
      }
  
      removeInput(i: number) {
          const control = &lt;FormArray&gt;this.form.controls['planArray'];
          control.removeAt(i);
      }
  
      async getVPDetails(pid, vid, locname, cityname): Promise&lt;any&gt; {
          return await this.vpService.getVehiclePlansInfo({plan_id: pid, make_id: vid, loc: locname, city: cityname});
      }
  
      // used to populate the  default security deposit &amp; fule level
      selectVM(value){
         this.vmService.showVehicleMake(value['value']).then((res) =&gt; {           
              this.securityDeposit = res['data']['base_security_deposit'];
              this.fuleLevel = res['data']['rate_per_fuel_level'];
              this.makeName = value['value'];
              this.vehicleID = res['data']['_id'];
              this.vehicleDetails = res['data']['brand_name'] + ' ' + res['data']['make_name'] + ' ' + res['data']['model_name'];
              this.getVehiclePlan();
              return false;
        }, (err) =&gt; {
          console.log(err);
        });
      }
      // used to prepopulate the default value min booking h, h/ booking cycle, free km, grace time
      //bookinH : string; bookingCycle : string; freeKm : string; grace : string;
      selectPlan(value) {
          this.plan.getPlansInfo(value['value']).then((res) =&gt; {
              this.bookinH = res['data']['min_booking_hours'];
              this.bookingCycle = res['data']['hours_per_booking_cycle'];
              this.freeKm = res['data']['free_km_per_booking_cycle'];
              this.grace = res['data']['grace_period_in_hours'];
              this.planName = value['value'];
              this.planDetails = res['data']['plan_name'];
              this.planID = res['data']['_id'];
              this.getVehiclePlan();
              return false;
        }, (err) =&gt; {
          console.log(err);
        });
      }
      // get the all plans on change of plans and vehicle make
      getVehiclePlan(){       
          if(this.planName != ''  &amp;&amp; this.makeName != '' ) {
              //const control = &lt;FormArray&gt;this.form.controls['planArray'];
              //control.controls = [];
              this.removeFormArray();
              this.addEditValues();
          }
      }
  
      // update the plan screen with default values
      updateDefaultValue(){
          var rate_plan = $('.rate_per_plan').val();      var additional_km_charges = $('.rate_per_additional_km').val();
          var security_deposit = this.securityDeposit;    var grace_period = this.grace;        
          var rate_fuel_level = this.fuleLevel;           var booking_cycle = this.bookingCycle;        
          var minimum_hours = this.bookinH;               var total_free_km = this.freeKm;
  
          $('.security_deposit, .grace_period, .rate_fuel_level, .booking_cycle, .minimum_hours, .additional_km_charges, .total_free_km, .rate_plan').each(function(){
              $('.security_deposit').val(security_deposit);
              $('.grace_period').val(grace_period);
              $('.rate_fuel_level').val(rate_fuel_level);
              $('.booking_cycle').val(booking_cycle);
              $('.minimum_hours').val(minimum_hours);
              $('.additional_km_charges').val(additional_km_charges);
              $('.total_free_km').val(total_free_km);
              $('.rate_plan').val(rate_plan);
          });
          return false;
      }
  
      checkAllLoc(value){
          var val = $('#'+value).val();
          if(val == "true"){
              $('.'+value).prop('checked', true); 
              $('#'+value).val("false");
          } else {
              $('.'+value).prop('checked', false); 
              $('#'+value).val("true");
          }
      }
  
      uncheckParent(value){
          $('#'+value).prop('checked', false);
          $('#'+value).val("true");
      }
  
  }
  </code></pre>
  
  <h2><strong>UPDATE 1 ENDS</strong></h2>
  
  <p>I am using TypeScript in MeanStack and using a function with <strong>async</strong> because it was not working in sequential order</p>
  
  <pre><code>// Calling Function (In Main.ts file)
  let rs = getVPDetails("2132");
  
  // Function Definition (In Main.ts file)
  async getVPDetails(pid) {
      let res = await this.vpService.getPlansInfo({plan_id: pid});
      return res;
  }
  
  // Middle Ware (IN service.ts file)
    getPlansInfo(data) {
      return new Promise((resolve, reject) =&gt; {
          this.http.post('/vehicle-plan/plan-info', data)
            .map(res =&gt; res.json())
            .subscribe(res =&gt; {
              resolve(res);
            }, (err) =&gt; {
              reject(err);
            });
      });
    }
  </code></pre>
  
  <p>I am getting the exact value while returning res (in "return res;") as I require. But in rs (Where I call), I am getting a value like this:</p>
  
  <p>ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}</p>
  
  <p>In __zone_symbol__value I am having my data as I require but by no means I am able to access it. I know that I am breaking the Promise object but how can I resolve it exactly when I dont want to use then() in getVPDetails();</p>
  
  <p>Please let me know what am I missing OR how can I get the data I require. </p>
  
  <p>Thanks in advance.</p>