How to get rid of __zone_symbol__value from returning value from API call?

Total
18
Shares

I’ve been stuck in this for a while now, so here’s my problem:

How to get rid of __zone_symbol__value from returning value from API call?

async getWeatherData(siteId: string,spaceId: string): Promise<object> {
    return this.http.get(`sites/${siteId}/spaces/${spaceId}/weather`).toPromise().then(WeatherData => {
        return WeatherData;
    });
}

without pipe: json, html shows that it is [object Promise].

{{this.WeatherData | json}}

And with above pipe:json, it returns following __zone_values:

if iotDevice doesnt have data:

{ "__zone_symbol__state": true, "__zone_symbol__value": [] } 

and if has data then:

{ "__zone_symbol__state": true, "__zone_symbol__value": [ { "SpaceId": "afdfad3ssdffas3dfsdaf", "DateTime": "2021-05-18 19:00:02.093970+00", "Temp": 23.749772727272727 }, { "SpaceId": "adfsf2dasdasffd1sfasdf", "DateTime": "2021-05-18 19:00:02.093970+00", "Temp": 4.76776923076923 }, { "SpaceId": "asds2dafsdafasdf3fasd", "DateTime": "2021-05-18 19:00:02.093970+00", "Temp": 4.036666666666666 } ] }

Tried to use api call without toPromise. Didn’t work.

async getWeatherData(siteId: string,spaceId: string){
    return this.http.get(`sites/${siteId}/spaces/${spaceId}/environmental-conditions`)
}

It then gives just different kinda of messy zone object:

{ "__zone_symbol__state": true, "__zone_symbol__value": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} } }

I can’t seem to get rid of the __zone_symbol__value even though when I assign it like:

this.WeatherData = this.WeatherData.__zone_symbol__value;

Can’t access the zone values for charts, or mat-table, or at all, since this doesn’t work:

<p *ngFor="let test of WeatherData.__zone_symbol__value.SpaceId">{{test | json}}</p>

What I’m doing wrong here? How to get purely data and not __zone_symbol data from api call?

I’m using angular version 11.1.2.


Solution

You want to use the data. The method this.http.get(sites/${siteId}/spaces/${spaceId}/environmental-conditions) returns Observable which would emit the data once the web server respond. The variation with toPromise this.http.get(sites/${siteId}/spaces/${spaceId}/environmental-conditions).toPromise() returns a Promise which would be resolved with the data when the web server respond.

The easiest wait would be to use Promise and await:

getWeatherData(siteId: string,spaceId: string): Promise<object> {
    return this.http.get(`sites/${siteId}/spaces/${spaceId}/weather`).toPromise();
}

async someMethod() {
   this.WeatherData = await this.getWeatherData(siteId, spaceId);
}

Leave a Reply

Your email address will not be published. Required fields are marked *