title: Typescript promise losing values after .then
body: <p>I have a function within an Angular2 service that is returning Mock data via <code>Promise.resolve</code> which when unwrapped with <code>.then</code> gives me an empty promise object. I can see that the calling function is receiving the Promise with the payload in the <code>__zone_symbole__value</code> property before it is passed into <code>.then however inside of</code>.then<code>I seem to be left with just an empty promise.</code></p>
  
  <pre><code>  getTemperatureData(): Promise&lt;any&gt; {
  
      let data = this.convertJSONToGoogleChartTable(temperatureData_JSON);
      let p = Promise.resolve(data);
      return p;
    }
  </code></pre>
  
  <p>Using Chrome I see that p above looks like</p>
  
  <p><code>ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}</code></p>
  
  <p>The calling code which is broken into two lines to debug is below.</p>
  
  <pre><code>getTemperatureData() {
      var d = this.dataService.getTemperatureData();
      d.then(data =&gt; this.line_ChartData = data);
  }
  </code></pre>
  
  <p>When I look at d I see the same as p above</p>
  
  <p><code>ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}</code></p>
  
  <p>The problem occurs with the <code>.then</code> where the value of "d" is just an empty promise. The below was taken from the Chrome dev tools console to show what I am seeing.</p>
  
  <pre><code>d.then(data =&gt; console.log(data))
  ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]}
  </code></pre>
  
  <p>No matter what I do and how many combinations I have tried I cannot get to my data inside of d. (Note that p and d are only temporary to break the code down for now.)</p>
  
  <p>My package.json is below:</p>
  
  <pre><code>{
    "name": "angular2",
    "version": "0.0.0",
    "license": "MIT",
  
    "angular-cli": {},
    "scripts": {
      "start": "ng serve",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "~2.1.0",
      "@angular/compiler": "~2.1.0",
      "@angular/core": "~2.1.0",
      "@angular/forms": "~2.1.0",
      "@angular/http": "~2.1.0",
      "@angular/material": "^2.0.0-alpha.9-3",
      "@angular/platform-browser": "~2.1.0",
      "@angular/platform-browser-dynamic": "~2.1.0",
      "@angular/router": "~3.1.0",
      "core-js": "^2.4.1",
      "ng2-bootstrap": "^1.1.16",
      "node-mysql": "^0.4.2",
      "rxjs": "5.0.0-beta.12",
      "ts-helpers": "^1.1.1",
      "zone.js": "^0.6.23"
    },
    "devDependencies": {
      "@types/jasmine": "^2.2.30",
      "@types/node": "^6.0.42",
      "angular-cli": "1.0.0-beta.19-3",
      "codelyzer": "1.0.0-beta.1",
      "jasmine-core": "2.4.1",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "1.2.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-remap-istanbul": "^0.2.1",
      "protractor": "4.0.9",
      "ts-node": "1.2.1",
      "tslint": "3.13.0",
      "typescript": "~2.0.3",
      "webdriver-manager": "10.2.5"
    }
  }
  </code></pre>