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
– geminiousgoel, Commented May 18, 2017 at 8:53
Possible duplicate of How do I return the response from an Observable/http/async call in angular2? — AVJT82
– AVJT82, Commented May 18, 2017 at 9: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 :) — AVJT82
– AVJT82, Commented May 18, 2017 at 9:25

Suraj Rao · Accepted Answer · 2017-05-18 09:01:14Z

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, 2017 at 9:01

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Afimidas Over a year ago

Yes it works, but I need to use a variable outside the function!

Suraj Rao Over a year ago

you mean in the template? this.arraydata will have the value.. only thing is it will be set once response is returned

Afimidas Over a year ago

I need to use a variable ARRAYDATA outside the function. right here constructor(private http: Http) { this.getCards('data.json'); console.log(this.ARRAYDATA); }

Duncan · Accepted Answer · 2017-05-18 08:56:20Z

1

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.

answered May 18, 2017 at 8:56

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

2 Comments

Afimidas Over a year ago

Yes it works, but I need to use a variable outside the function,

Duncan Over a year ago

you do that by exposing the observable (or a modified version of it) and then subscribing to that where you need the value.

runit · Accepted Answer · 2017-05-18 08:56:28Z

0

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.

answered May 18, 2017 at 8:56

runit

3761 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular 2 http object to variable how?

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related