Angular won't put data objects into array

Question

I am trying to fetch data from an API that looks like this:

The data is succesfully fetched and I can log it on my console like this:

component.ts:

getRacvaData(id:number){
    this.racvaStat=[];
    this.service.GetRacvaPodaci(id).subscribe(data => {console.warn(data)});
}

service.ts

 GetRacvaPodaci(racvaId: number)
 {
  return this.http.get('http://11.112.3.160:8888/Racve/api/v1/getRacva?racva_id='+racvaId);
 }

console:

But, when I try to put it in a variable and, for example, log that variable or smth, it doesnt give any result. I put the data in a variable like this:

public racvaStat:any = [];

getRacvaData(id:number){
    this.racvaStat=[];
    this.service.GetRacvaPodaci(id).subscribe(data => this.racvaStat = data);

    for(let item of this.racvaStat){
      console.log(item.nit_a); // this is not logging anything
    }
}

Does anybody know what could be the problem here? I want to put it in the array so I can use that array all over my project.

Try this this.service.GetRacvaPodaci(id).subscribe((data:any) => { this.racvaStat = data; console.log(this.racvaStat) for(let item of data){ console.log(item.nit_a); } }); — Ravi Ashara
– Ravi Ashara, Commented Nov 9, 2021 at 11:50
Your service is asynchronous meaning you are trying to loop over an array that has not yet been assigned the returned values. If you want to make sure the data has been assigned from your service you should do your operations inside the subscribe block as @RaviAshara mentioned above — Sam
– Sam, Commented Nov 9, 2021 at 11:52
But I want to put the data in the array so I can use that array all over my project, in other funcions/methods/etc... — OmarLittle
– OmarLittle, Commented Nov 9, 2021 at 11:56
@Sam how can I use this.racvaStat outside the subscribe block? — OmarLittle
– OmarLittle, Commented Nov 9, 2021 at 12:00
@OmarLittle you can just use this.racvaStat, as long as you use this value after your service has completed. — Sam
– Sam, Commented Nov 9, 2021 at 12:10

Nader · Accepted Answer · 2021-11-09 11:53:29Z

1

Because fetching your data is a Async task, while you are logging the array content after the HTTP request, without telling JS to wait until the response is received form the API...

you should try smth like ...

this.service.GetRacvaPodaci(id).subscribe(data => {
    this.racvaStat = data

    for(let item of this.racvaStat){
      console.log(item.nit_a); // this is not logging anything
    }
});

This way the foreach will only start when the response is ready inside racvaStat array.

I suggest you check out this for more info ..

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

answered Nov 9, 2021 at 11:53

Nader

2101 silver badge9 bronze badges

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

2 Comments

OmarLittle Over a year ago

Okay, that it functional, but what I want to know is what must I do to use this.racvaStat array and all of it's objects outside the subscribe block? My goal is to call getRacvaData() on ngOnInit so it fills up this.racvaStat array and use that array on other methods/functions after.

Nader Over a year ago

If your workflow doesn't require racvaStat to be defined after ngOnInit, then it's safe to use this approach, and whenever you called this,racvaStat later you should have it defined, if you must wait for it you can use smth like async/await ... though it's not a good idea since ngOnInit is the first life cycle hook and you are forcing it to stop the component initializing until the response arrive ...

Collectives™ on Stack Overflow

Angular won't put data objects into array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related