Angular 2 http object to variable how?

Question

I'm using this 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")}
              );
  }

This code works, now I can not understand how to pass an object RESPONSE to a variable ARRAYDATA; Help me please! This code does not work:

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
  }

I need to use a variable ARRAYDATA outside the function. right here

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

you need to copy single record at a time or use filters with such condition it will filter all data — geminiousgoel, May 18 '17 at 08:53
Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](http://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — AT82, May 18 '17 at 09:24
You cannot access `ARRAYDATA` inside the constructor like so. Like you can see from the duplicate, data is ONLY available inside the subscription. That's just how it is, you cannot do anything about it. You need to manipulate the data inside the callback once you have received it :) — AT82, May 18 '17 at 09:25

score 3 · Accepted Answer · answered May 18 '17 at 09:01

3

You have two issues here.

Http responses return observables which are asynchronous and that means you can get data within the subscribe function.

You are using a regular function which means your this will change and point to the function object rather than the class. You should use Arrow Functions for callbacks. ()=>{} does not assign a function object to this.

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")}
      );

answered May 18 '17 at 09:01

Suraj Rao

29,388
11
94
103

Yes it works, but I need to use a variable outside the function! – Afimidas May 18 '17 at 09:20
you mean in the template? `this.arraydata` will have the value.. only thing is it will be set once response is returned – Suraj Rao May 18 '17 at 09:22
I need to use a variable ARRAYDATA outside the function. right here constructor(private http: Http) { this.getCards('data.json'); console.log(this.ARRAYDATA); } – Afimidas May 18 '17 at 09:24

score 1 · Answer 2 · answered May 18 '17 at 08:56

The request happens asynchronously. If you need to manipulate the result then move the code to use that data inside the callback.

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")}
              );
  }

A lot of angular happens asynchronously. That means you need to be prepared to wait for results to come back by using observables or promises. In this case you might be better saving the observable in a variable and then you can subscribe to the observable anywhere you need to use the value.

Yes it works, but I need to use a variable outside the function, — Afimidas, May 18 '17 at 09:20
you do that by exposing the observable (or a modified version of it) and then subscribing to that where you need the value. — Duncan, May 18 '17 at 10:27

score 0 · Answer 3 · answered May 18 '17 at 08:56

This is totally normal. Your http get make an asynchronous call,It won't wait to the response of the http.get and go directly after the subscribe and execute the console.log().

Then the response will come from the server and you will affect the response to the arraydata.

I strongly advise you to look how asynchronous work in javascript.

Hope it helps.

Angular 2 http object to variable how?

3 Answers3