Empty Array after subscribe call [duplicate]

Question

I wrote a service:

loadroom() : Observable<any[]>{
    return this.http.get(this.roomUrl)
        .pipe(
            map((response: any) => {
                let resources = response;
                return resources.map(function(room:any) {
                    return {id: room.id, title: room.title, eventcolor: room.eventColor};
                });
            })
        );
}

Then I use this service in a component

rooms: any[] = [];       
ngOnInit() {
    this.schedulerService.loadroom().subscribe(response => this.rooms = response);
    console.log(this.rooms);
}

I didn't see data in the array. In console I get an empty array []

But if I use

this.schedulerService.loadroom().subscribe(response => {console.log(response)});

I get the data.

Gilsido · Accepted Answer · 2019-07-23 13:25:43Z

7

Yes, this is completely the expected behavior, subscribeis asynchronous, meaning that calling it won't block the execution of the code, it won't wait for it to finish before executing the next line. So

this.schedulerService.loadroom().subscribe(response => this.rooms=response);
    console.log(this.rooms);

Triggers the log before the subscription finished

answered Jul 23, 2019 at 13:25

Gilsido

5721 gold badge3 silver badges11 bronze badges

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

1 Comment

Sibulele Over a year ago

Then what is the solution?

RoadEx · Accepted Answer · 2019-07-23 13:28:26Z

0

Subscribe is asynchronous. It's likely the execution isn't finished : you need to work in the chained event to keep the flow at this point. Anything you need to do with this.rooms need to be in the subscribe event.

answered Jul 23, 2019 at 13:28

RoadEx

5412 silver badges13 bronze badges

Comments

Ambroise Rabier · Accepted Answer · 2019-07-23 13:29:05Z

0

It is because Observable are asynchronous. Meaning console.log(this.rooms); happen before response => this.rooms=response.

So the correct way of using it is:

this.schedulerService.loadroom().subscribe(response => {
  this.rooms = response;
  console.log(this.rooms);
});

answered Jul 23, 2019 at 13:29

Ambroise Rabier

4,2225 gold badges33 silver badges41 bronze badges

1 Comment

Sibulele Over a year ago

I want to use "rooms" in the rest of the code. How do I get to update it globally?

Collectives™ on Stack Overflow

Empty Array after subscribe call [duplicate]

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Related