So speichern Sie abgerufene JSON als Objekt?

Question

Wie kann ich das Ergebnis einer HTTP-Anfrage aus dem JSON-Format in ein Objekt in TypeScript speichern?

Hier ist mein Code:

Komponente:

import { Component } from '@angular/core'; 
import { DateTimeService } from './datetime.service'; 
import { DateTime } from './datetime' 

@Component({ 
    selector: 'my-app', 
    moduleId: module.id, 
    templateUrl: 'app.component.html', 
    providers: [DateTimeService] 
}) 


export class AppComponent { 

    constructor(private _dateTimeService: DateTimeService){ } 

    dateTime: DateTime = new DateTime(); 

    getDateTime() { 
    this._dateTimeService.getDateTime().subscribe(data => this.dateTime = data, 
     error => alert("error"), 
    () => alert("done")); 
    debugger; 

    alert(this.dateTime.date); 
    alert(this.dateTime.milliseconds_since_epoch); 
    alert(this.dateTime.time); 

    } 
} 

Service:

import { Http } from '@angular/http'; 
import {Injectable} from'@angular/core'; 
import 'rxjs/add/operator/map' 
import { DateTime } from './datetime' 

@Injectable() 
export class DateTimeService{ 
    constructor(private _http: Http) { } 
    getDateTime() { 
     return this._http.get('http://date.jsontest.com').map(res => <DateTime>res.json()); 
    } 
} 

Alle Objekte von DateTime Objekt nicht definiert sind, wenn ich diesen Code ausführen. Wenn ich jedoch die eingehenden Daten nicht in den Typ DateTime in meinem Dienst umwandle und JSON.stringify(data.time) (zum Beispiel) verwende, kann ich nur eine einzige Eigenschaft erhalten.

Answer 1

Alle Ihre Warnungen sind nicht definiert, da die Warnungen ausgeführt werden, bevor Daten abgerufen wurden.

getDateTime() { 
    this._dateTimeService.getDateTime().subscribe(data => this.dateTime = 
    // executed sometimes later 
    data, 
     error => alert("error"), 
    () => alert("done")); 
    debugger; 
// executed first 
alert(this.dateTime.date); 
alert(this.dateTime.milliseconds_since_epoch); 
alert(this.dateTime.time); 
} 

Wenn Sie Ihre Benachrichtigungen innerhalb der Abonnement hinzufügen, sollten Sie Ihre Benachrichtigungen

getDateTime() { 
    this._dateTimeService.getDateTime().subscribe(data => { 
    this.dateTime = data; 
    alert(this.dateTime.date); 
    alert(this.dateTime.milliseconds_since_epoch); 
    alert(this.dateTime.time); 
    }); 
} 

arbeiten Dies liegt daran, diese asynchronen Aufruf ist, so wird Code nicht in der Reihenfolge, wie sie geschrieben werden ausgeführt. Wenn Sie Probleme beim Anzeigen Ihrer Daten in Ihrer Ansicht haben, geschieht dies aus dem gleichen Grund, da die Ansicht gerendert wird, bevor die Daten abgerufen wurden. Daher kommt hier die Verwendung von safe navigation operator oder *ngIf.

Sie werden daran gewöhnen müssen, da wir ständig mit Asynchron-Operationen zu tun sind;)

So können Sie Ihre Vorlage wickeln in einem *ngIf etwa so:

<div *ngIf="dateTime"> 
    <!-- Your code here --> 
</div> 

, die entfernt der Div aus der Vorlage, bis es Werte in dateTime (wir nehmen an, es wird sein).

Die andere Option ist die zuvor genannte sichere Navigation Betreiber, die Sie wie so verwenden:

{{dateTime?.date}} 
{{dateTime?.milliseconds_since_epoch}} 
{{dateTime?.time}}