Typescript promise losing values after .then

Question

I have a function within an Angular2 service that is returning Mock data via Promise.resolve which when unwrapped with .then gives me an empty promise object. I can see that the calling function is receiving the Promise with the payload in the __zone_symbole__value property before it is passed into .then however inside of.thenI 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 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 which is broken into two lines to debug 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 occurs with the .then 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.

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 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.)

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

Solution

the value of data is just an empty promise

That tells me that convertJSONToGoogleChartTable is returning a promise, and you're not chaining your promise to it.

Note that if you were using a stronger type than any, the TypeScript compiler would probably have caught this for you.

Since you're not doing anything after getting that data, you could just do this:

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

But if you want to do something with that data before returning it, you can do that in a then, chained off of the original promise:

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

Comments

[JSeatter]

Thank you for responding. The function convertJSONToGoogleChartTable just returns a string which is a conversion of the raw JSON. This is all within the Angular2 service class I am using for getting and formatting the data.

[JSeatter]

Thank you for responding. The function convertJSONToGoogleChartTable just returns a string which is a conversion of the raw JSON. This is all within the Angular2 service class I am using for getting and formatting the data. data acuially looks like data "[["Date","Temperature","LowTemperature"],["05/11/2016 00:14:23",72.44,null],["05/11/2016 00:44:31",71.46,null],["05/11/2016 01:14:39",70.48,null],....]]]" That is returns to the caller just fine, in my case that is "d" in the Angular2 Component. Where it is going wrong for me is extracting the above string from d.

[StriplingWarrior]

@JSeatter: What happens if you enter into your console: Promise.resolve(2).then(console.log)? Also, what if you put console.log(data) after your call to convertJSONToGoogleChartTable?

[JSeatter]

as below, Promise.resolve(2).then(console.log) 2 ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: undefined} I also tried this at a breakpoint in the code after d is assigned it values d 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]]"} d.then(console.log) ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]} the content of __value is not shown in the console and the __value is Array[0].

[StriplingWarrior]

Huh. Weird. I'm pretty stumped on that one. Can you try removing pieces until you have a minimally verifiable example? I'm wondering if a third-party library on your page is messing with the Promise object.

[JSeatter]

This is resolved, I would love to be able to say I know the resolution. I made to many changes over the last day to know which was the actual fix however it was related to the Mock JSON data and the convert function I wrote that seemed to trip up the .then and fail silently. Unresolved root cause

[StriplingWarrior]

Okay, I voted to close the question as "Off Topic" based on its no longer being reproducible.