2017-04-18 1 views
1

Ich benutze Winkel 2, um Daten von einem Restfull-Service zu zeigen.Angular 2 http Versprechen nicht korrekt das Objekt

Wenn ich den API-Aufruf mit meinem Dienst, ist es möglich, die JSON-Ausgabe von Fitbit API zu sehen. Aber wenn ich die Daten einer Klasse angular2 zuordnen will, geht etwas schief und ich kann die Daten nicht sehen.

constructor (private http: Http) {} 
 

 
    getHeartrates(): Promise<HeartRate> { 
 
    let headers = new Headers({ 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1TE1ENkMiLCJhdWQiOiIyMjg5OUciLCJpc3MiOiJGaXRiaXQiLCJ0eXAiOiJhY2Nlc3NfdG9rZW4iLCJzY29wZXMiOiJyc29jIHJzZXQgcmFjdCBybG9jIHJ3ZWkgcmhyIHJudXQgcnBybyByc2xlIiwiZXhwIjoxNDkyNTIxMTQ0LCJpYXQiOjE0OTE5MTYzNDR9.aP44gsdkQXmlRlkN65cEVKXNmqMWZXECOMzP0tDJzng' }); 
 
    headers.append('Accept', 'application/json'); 
 
    let options = new RequestOptions({ headers: headers }); 
 

 
    return this.http.get(this.heartrateUrl, options) 
 
        .toPromise() 
 
        .then(this.extractData) 
 
        .catch(this.handleError); 
 
    } 
 

 
    private extractData(res: Response) { 
 
    let body = res.json(); 
 
    // let newbody = JSON.parse(body); 
 
    return body || {}; 
 
    } 
 

 
    private handleError (error: Response | any) { 
 
    // In a real world app, we might use a remote logging infrastructure 
 
    let errMsg: string; 
 
    if (error instanceof Response) { 
 
     const body = error.json() || ''; 
 
     const err = body.error || JSON.stringify(body); 
 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
 
    } else { 
 
     errMsg = error.message ? error.message : error.toString(); 
 
    } 
 
    console.error(errMsg); 
 
    return Promise.reject(errMsg); 
 
    }
export class HeartRate { 
 
     activities_heart: ActivitiesHeart[]; 
 
     activities_heart_intraday: ActivitiesHeartIntraday; 
 
    } 
 
    
 
    class HeartRateZone { 
 
     caloriesOut: number; 
 
     max: number; 
 
     min: number; 
 
     minutes: number; 
 
     name: string; 
 
    } 
 

 
    class ActivitiesHeart { 
 
     customHeartRateZones: any[]; 
 
     dateTime: string; 
 
     heartRateZones: HeartRateZone[]; 
 
     value: string; 
 
    } 
 

 
    class Dataset { 
 
     time: string; 
 
     value: number; 
 
    } 
 

 
    class ActivitiesHeartIntraday { 
 
     dataset: Dataset[]; 
 
     datasetInterval: number; 
 
     datasetType: string; 
 
    }
<h2>Show something about heartrates</h2> 
 
<p>{{ heartratelist?.activities_heart_intraday?.dataset[0]?.value }}</p> 
 
<ul *ngFor="#item of heartratelist?.activities_heart_intraday?.dataset"> 
 
    <li>{{item.value}}</li> 
 
</ul>

Dies ist, was die json

{ 
 
\t "activities-heart": [{ 
 
\t \t "customHeartRateZones": [], 
 
\t \t "dateTime": "today", 
 
\t \t "heartRateZones": [{ 
 
\t \t \t "caloriesOut": 26.01129, 
 
\t \t \t "max": 97, 
 
\t \t \t "min": 30, 
 
\t \t \t "minutes": 14, 
 
\t \t \t "name": "Out of Range" 
 
\t \t }, { 
 
\t \t \t "caloriesOut": 0, 
 
\t \t \t "max": 135, 
 
\t \t \t "min": 97, 
 
\t \t \t "minutes": 0, 
 
\t \t \t "name": "Fat Burn" 
 
\t \t }, { 
 
\t \t \t "caloriesOut": 0, 
 
\t \t \t "max": 164, 
 
\t \t \t "min": 135, 
 
\t \t \t "minutes": 0, 
 
\t \t \t "name": "Cardio" 
 
\t \t }, { 
 
\t \t \t "caloriesOut": 0, 
 
\t \t \t "max": 220, 
 
\t \t \t "min": 164, 
 
\t \t \t "minutes": 0, 
 
\t \t \t "name": "Peak" 
 
\t \t }], 
 
\t \t "value": "58.62" 
 
\t }], 
 
\t "activities-heart-intraday": { 
 
\t \t "dataset": [{ 
 
\t \t \t "time": "10:13:46", 
 
\t \t \t "value": 65 
 
\t \t }, { 
 
\t \t \t "time": "10:21:13", 
 
\t \t \t "value": 70 
 
\t \t }, { 
 
\t \t \t "time": "10:21:28", 
 
\t \t \t "value": 70 
 
\t \t }, { 
 
\t \t \t "time": "10:21:33", 
 
\t \t \t "value": 80 
 
\t \t }, { 
 
\t \t \t "time": "10:21:38", 
 
\t \t \t "value": 79 
 
\t \t }, { 
 
\t \t \t "time": "10:21:43", 
 
\t \t \t "value": 76 
 
\t \t }, { 
 
\t \t \t "time": "10:21:48", 
 
\t \t \t "value": 73 
 
\t \t }, { 
 
\t \t \t "time": "10:21:53", 
 
\t \t \t "value": 73 
 
\t \t }, { 
 
\t \t \t "time": "10:22:03", 
 
\t \t \t "value": 67 
 
\t \t }, { 
 
\t \t \t "time": "10:22:08", 
 
\t \t \t "value": 63 
 
\t \t }, { 
 
\t \t \t "time": "10:22:13", 
 
\t \t \t "value": 59 
 
\t \t }, { 
 
\t \t \t "time": "10:22:23", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:22:33", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:22:43", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:22:53", 
 
\t \t \t "value": 62 
 
\t \t }, { 
 
\t \t \t "time": "10:23:03", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:23:08", 
 
\t \t \t "value": 62 
 
\t \t }, { 
 
\t \t \t "time": "10:23:13", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:23:18", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:23:23", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:23:28", 
 
\t \t \t "value": 59 
 
\t \t }, { 
 
\t \t \t "time": "10:23:33", 
 
\t \t \t "value": 59 
 
\t \t }, { 
 
\t \t \t "time": "10:23:43", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:23:58", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:24:13", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:24:23", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:24:28", 
 
\t \t \t "value": 59 
 
\t \t }, { 
 
\t \t \t "time": "10:24:33", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:24:48", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:24:53", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:24:58", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:25:13", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:25:28", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:25:33", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:25:48", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:25:58", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:26:08", 
 
\t \t \t "value": 57 
 
\t \t }, { 
 
\t \t \t "time": "10:26:18", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:26:28", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:26:43", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:26:58", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:27:13", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:27:18", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:27:28", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:27:43", 
 
\t \t \t "value": 53 
 
\t \t }, { 
 
\t \t \t "time": "10:27:58", 
 
\t \t \t "value": 53 
 
\t \t }, { 
 
\t \t \t "time": "10:28:03", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:28:18", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:28:33", 
 
\t \t \t "value": 53 
 
\t \t }, { 
 
\t \t \t "time": "10:28:48", 
 
\t \t \t "value": 53 
 
\t \t }, { 
 
\t \t \t "time": "10:29:03", 
 
\t \t \t "value": 53 
 
\t \t }, { 
 
\t \t \t "time": "10:29:08", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:29:13", 
 
\t \t \t "value": 53 
 
\t \t }, { 
 
\t \t \t "time": "10:29:18", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:29:23", 
 
\t \t \t "value": 57 
 
\t \t }, { 
 
\t \t \t "time": "10:29:38", 
 
\t \t \t "value": 57 
 
\t \t }, { 
 
\t \t \t "time": "10:29:43", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:29:53", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:30:08", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:30:13", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:30:28", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:30:43", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:30:58", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:31:13", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:31:18", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:31:33", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:31:48", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:32:03", 
 
\t \t \t "value": 54 
 
\t \t }, { 
 
\t \t \t "time": "10:32:13", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:32:28", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:32:33", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:32:38", 
 
\t \t \t "value": 55 
 
\t \t }, { 
 
\t \t \t "time": "10:32:53", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:33:08", 
 
\t \t \t "value": 56 
 
\t \t }, { 
 
\t \t \t "time": "10:33:13", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:33:23", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:33:33", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:33:48", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:34:03", 
 
\t \t \t "value": 61 
 
\t \t }, { 
 
\t \t \t "time": "10:34:08", 
 
\t \t \t "value": 60 
 
\t \t }, { 
 
\t \t \t "time": "10:34:23", 
 
\t \t \t "value": 60 
 
\t \t }], 
 
\t \t "datasetInterval": 1, 
 
\t \t "datasetType": "second" 
 
\t } 
 
}

Dank gibt für die Unterstützung!

Antwort

0

Try Ändern

export class HeartRate { 
    activities_heart: ActivitiesHeart[]; 
    activities_heart_intraday: ActivitiesHeartIntraday; 
} 

zu

export class HeartRate { 
    activities-heart: ActivitiesHeart[]; 
    activities-heart-intraday: ActivitiesHeartIntraday; 
} 

Ändern der Unterstrichen zu Bindestriche.

Obwohl das Problem mit Bindestrichen ist, dass JavaScript - als Operator behandelt, müssen Sie möglicherweise auf Eigenschaften mit jsonObj['activities-heart'] zugreifen.

0

In Ihrer Komponente abonnieren Ihre Methode

ZB:

constructor (private heartRateService: HeartRateService) {} 

getHeartRate(){ 
    this.heartRateService.getHeartrates().subscribe(
     (info)=>{ 
     this.heartratelist=info; 
     } 
    ); 
} 
+0

'toPromise' erfordert nicht' subscribe'. –

Verwandte Themen