Angular 2 http Objekt zu Variable wie?

Question

Ich verwende diesen Code:

private ARRAYDATA: any[]; 
constructor(private http: Http) { 
    this.getCards('data.json'); 
} 
getCards(url) 
    { 
    this.http.get(url) 
       .map(response => response.json()) 
       .subscribe(
        function(response) { 
        console.log(response); //show object 
        }, 
        function(error) { console.log("Error happened" + error)}, 
        function() { console.log("the subscription is completed")} 
      ); 
    } 

Dieser Code funktioniert, jetzt kann ich nicht verstehen, wie ein Objekt Antwort auf eine Variable ARRAYDATA passieren; Hilf mir bitte! Dieser Code funktioniert nicht:

getCards(url) 
    { 
    this.http.get(url) 
       .map(response => response.json()) 
       .subscribe(
        function(response) { 
        console.log(response); //show object 
        this.arraydata = response; 
        }, 
        function(error) { console.log("Error happened" + error)}, 
        function() { console.log("the subscription is completed")} 
      ); 
       console.log(this.arraydata)// show undefind 
    } 

Ich brauche eine variable ARRAYDATA außerhalb der Funktion zu verwenden. genau hier

constructor(private http: Http) { 
    this.getCards('data.json'); 
    console.log(this.ARRAYDATA); 
} 

Answer 1

Die Anfrage erfolgt asynchron. Wenn Sie das Ergebnis manipulieren müssen, verschieben Sie den Code, um diese Daten im Rückruf zu verwenden.

getCards(url) 
    { 
    this.http.get(url) 
       .map(response => response.json()) 
       .subscribe(
        function(response) { 
        console.log(response); //show object 
        this.arraydata = response; 
        console.log(this.arraydata)// use it here! 
        }, 
        function(error) { console.log("Error happened" + error)}, 
        function() { console.log("the subscription is completed")} 
      ); 
    } 

Eine Menge Winkel geschieht asynchron. Das bedeutet, dass Sie darauf vorbereitet sein müssen, mit Observablen oder Versprechungen auf Ergebnisse zu warten. In diesem Fall ist es besser, das Observable in einer Variablen zu speichern, und dann können Sie das Observable überall dort abonnieren, wo Sie den Wert verwenden müssen.

Answer 2

Das ist völlig normal. Ihr http erhalten einen asynchronen Aufruf, es wird nicht auf die Antwort von http.get warten und direkt nach dem Abonnement gehen und die console.log() ausführen.

Dann kommt die Antwort vom Server und Sie werden die Antwort auf die arraydata beeinflussen.

Ich rate Ihnen dringend zu sehen, wie asynchrone Arbeit in Javascript.

Ich hoffe, es hilft.

Answer 3

Sie haben zwei Probleme hier.

1. Http Antworten zurückgeben Observablen, die asynchron sind und das bedeutet, Sie Daten innerhalb der abonnieren Funktion erhalten können.

2. Sie verwenden eine reguläre Funktion, was bedeutet, dass sich Ihr this ändert und auf das Funktionsobjekt und nicht auf die Klasse zeigt. Sie sollten Arrow Functions für Rückrufe verwenden. ()=>{} weist this kein Funktionsobjekt zu.

   this.http.get(url) 
        .map(response => response.json()) 
        .subscribe(
        (response) => { 
         console.log(response); //show object 
         this.arraydata = response; 
         console.log(this.arraydata); 
         }, 
        (error) => { console.log("Error happened" + error)}, 
        () => { console.log("the subscription is completed")} 
       );