Typescript promise to lose values ​​after. then

Question

I have a function in Angular2 service that returns Mock data through Promise.resolve , which when unpacking with .then gives me an empty promise object. I see that the calling function receives a Promise with a payload in the __zone_symbole__value property before it is passed to .then however inside of . Then I seem to be left with just an empty promise.

  getTemperatureData(): Promise<any> { let data = this.convertJSONToGoogleChartTable(temperatureData_JSON); let p = Promise.resolve(data); return p; } 

Using Chrome, I see that the p above looks like

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]]"}

The calling code, split into two lines for debugging, is below.

 getTemperatureData() { var d = this.dataService.getTemperatureData(); d.then(data => this.line_ChartData = data); } 

When I look at d, I see the same as p above

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]]"}

The problem arises with .then , where the value of "d" is just an empty promise. Below is the Chrome dev tool console to show what I see.

 d.then(data => console.log(data)) ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]} 

No matter what I do and how many combinations I tried, I can not get to my data inside d. (Note that p and d are temporary only to break the code at the moment.)

My package.json is below:

 { "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" } } 

Answer 1

data value is just an empty promise

This tells me that convertJSONToGoogleChartTable returns a promise, and you don't associate your promise with it.

Note that if you used a stronger type than any , the TypeScript compiler would probably catch this for you.

Since you do nothing after receiving this data, you can simply do this:

  getTemperatureData(): Promise<any> { return this.convertJSONToGoogleChartTable(temperatureData_JSON); } 

But if you want to do something with this data before returning it, you can do it in then , fettered by the original promise:

  getTemperatureData(): Promise<any> { return this.convertJSONToGoogleChartTable(temperatureData_JSON) .then(data => { console.log(data); return data; }); }