Angular 2: Observable subscription not reading data correctly [duplicate]

Question

I am trying to fetch data (Array of objects) from ngrx Store and assign to an array using subscribe option provided by Observables in Angular 2, but the issue is when I try to read the contents of the array. Following is a snippet of code ->

 metaData$: Observable<MetaClassDefinition[]>;
    myArray: MetaClassDefinition[] = [];  

    constructor(private store: Store<fromRoot.State>) {
      this.metaData$ = store.select(fromRoot.getMetadata);
    }

    this.metaData$.subscribe(
       data => {
          if (data.length > 0) {
             // Deep copy array
             data.forEach(v => this.myArray.push({...v}));
          }
       },
       error => { console.log(error)}
    );

    console.log(this.myArray);  //-------(1)
    console.log(this.myArray.length);   //-------(2)

Now, 1st console.log prints the array of objects like this ->

But, we i try to print 2nd console.log, I get the size of the array as zero. Is there something that I am missing out here?

Since Observable is async the length is zero

Sreemat
– Sreemat

2017-07-02 05:21:56 +00:00
Commented Jul 2, 2017 at 5:21 — Sreemat
– Sreemat, Commented Jul 2, 2017 at 5:21

DeborahK · Accepted Answer · 2017-06-30 21:32:30Z

2

This is because of the timing issues with regard to asynchronous operations. Move the console statements within the subscribe to see more what you are expecting.

To add to this ... by logging the object reference to the console ... and then opening it later ... the data has arrived at this point and appears in the debugger.

The array count is evaluated right away (before the data is retrieved) and since it is a simple number, is not re-evaluated.

answered Jun 30, 2017 at 21:32

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

4 Comments

user3509913 Over a year ago

Yes, it's indeed an issue with asynchronous operations. Is there a way to solve this issue and get the required outputs? Thanks!

DeborahK Over a year ago

Yes, as I said above, move the console statements within the subscribe to see more what you are expecting.

user3509913 Over a year ago

Thank you so much for resolving the previous issue, I am currently facing another issue with subscribing the data through Observables. Till the time data is being subscribed and stored in a local variable(Object array) for displaying, meanwhile the component loads and thereby displays no data as it is still fetching the data from the back end. I assume the issue is with race conditions(asynchronous), any clue on how to approach this issue?

DeborahK Over a year ago

If this is a different question, please post a new question with appropriate code so we can take a look. Thx!

Abel Valdez · Accepted Answer · 2017-06-30 21:58:14Z

1

Try to print the array information inside of the subscribe.

this.metaData$.subscribe(
       data => {
          if (data.length > 0) {
             // Deep copy array
             data.forEach(v => this.myArray.push({...v}));
             //HERE
             console.log(this.myArray);  //-------(1)
             console.log(this.myArray.length);   //-------(2)
            // END  
          }
       },
       error => { console.log(error)}
    );

answered Jun 30, 2017 at 21:58

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular 2: Observable subscription not reading data correctly [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related