Empfangen von JSON-Daten via http: leere Antwort

Question

ich Angular2 bin neu und schwer zu verstehen mir wirklich, es ist irgendwie wie http in Angular2 funktioniert. Ich machte eine einfache Komponente, die eine JSON-Antwort anzeigen sollte. Es funktioniert nicht und ich habe keine Ahnung warum. Ich überprüfte viele Tutorials und probierte es sowohl mit Versprechungen als auch mit Observablen. Funktioniert nicht. Ich kann die Daten der Antwort nicht bekommen.

Mein Code:

private doAction() { 
    this.doHttpRequest().subscribe(
     data => this.content = data 
    ); 
    this.content = JSON.stringify(this.content); 
    } 

    private doHttpRequest() { 
    return this.http.get('http://jsonplaceholder.typicode.com/posts/1') 
        .catch(this.handleError); 
    } 

this.content ist meine Vorlage binden. Wenn ich auf eine Schaltfläche klicken doAction() für einen zweiten Start I „“ in der Vorlage, nach einer weiteren Sekunde [object Object] siehe

Was hier ist das Problem?

Answer 1

Das ist das erwartete Verhalten

private doAction() { 
    // schedule HTTP call to server and subscribe to get notified when data arrives 
    this.doHttpRequest().subscribe(
     // gets called by the observable when the response from the server aarives 
     data => this.content = data 
    ); 
    // execute immediately before the call to the server was even sent 
    this.content = JSON.stringify(this.content); 
    } 

es es

private doAction() { 
    this.doHttpRequest().subscribe(
     data => { 
     //this.content = data; 
     this.content = data.json()); 
     }); 
    ); 
    } 

zu

ändern zu beheben Um Code ausgeführt werden, nachdem die Daten angekommen, dann müssen Sie es innerhalb des subscribe(...) Rückruf bewegen.

Answer 2

Da HTTP-Anfragen sind Asynchron Sie über die Ergebnisse des http-Aufruf alle Ihre Logik in Abhängigkeit setzen haben in der subscribe() Rückruf wie folgt aus:

private doAction() { 
    this.doHttpRequest().subscribe(
    data => { 
     this.content = data; 
     // any more logic must sit in here 
    } 
); 
} 

private doHttpRequest() { 
    return this.http.get('http://jsonplaceholder.typicode.com/posts/1') 
       .map(res => res.json()); 
       .catch(this.handleError); 
} 

Answer 3

Http Rufdaten zurückkehrt, da es „[object Object zeigt ] "in Vorlage. Wenn Sie die JSON-Daten in der Vorlage anzeigen möchten, können Sie die JSON-Pipe wie folgt verwenden.

{{content | json}}

PS: Keine Notwendigkeit des "this.content = JSON.stringify (this.content);" in deinem Code.