Angular 2: Observable subscription not reading data correctly

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 Jul 02 '17 at 05:21 — Sreemat, Jul 02 '17 at 05:21

score 2 · Answer 1 · answered Jun 30 '17 at 21:32

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 '17 at 21:32

DeborahK

57,520
12
104
129

Yes, it's indeed an issue with asynchronous operations. Is there a way to solve this issue and get the required outputs? Thanks! – user3509913 Jun 30 '17 at 21:49
Yes, as I said above, move the console statements within the subscribe to see more what you are expecting. – DeborahK Jun 30 '17 at 22:48
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? – user3509913 Jul 19 '17 at 20:47
If this is a different question, please post a new question with appropriate code so we can take a look. Thx! – DeborahK Jul 19 '17 at 20:56

score 1 · Accepted Answer · answered Jun 30 '17 at 21:58

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

Angular 2: Observable subscription not reading data correctly

2 Answers2