Angular2/typescript - unexpected array behavior (such as length is 0 when it is really not)

Question

FYI I am very new to Angular2 - basically I'm calling a data service that returns a promise of an array of objects, which I bind in my view and loop through them. It is working great, but I started exploring how to use a infinite scroll which would require me to append onto the array, but I cannot get this to work.

This is how I declare the array in the component (typescript):

integrationCollection: IntegrationEntity[] = [];

And this is the data service call:

this.integrationService.getIntegrations().then(integrationCollection => this.integrationCollection = integrationCollection);

And the results are displayed just fine on the page. But the length property returns 0.. why would this be ??

alert('integrationCollection count: ' + this.integrationCollection.length); // returns 0

Also, I'm going to need to be able to add to my array for an infinite scroll scenario, so I think I need to be able to concat the array - but this is not working at all (no errors, but nothing is displayed on the page):

this.integrationService.getIntegrations().then(integrationCollection => this.integrationCollection.concat(integrationCollection));

I think maybe these two problems are related? I think I'm just missing something fundamental.

Thanks for any insight.

For the first thing, if I had to guess, it's because the alert is triggering before the getIntegrations() call is finished. I'm not sure about the second issue. — Dave V
– Dave V, Commented Oct 4, 2016 at 20:44
Thanks, got it. Second issue is because I need to do an assignment: this.integrationService.getIntegrations().then(integrationCollection => this.integrationCollection = this.integrationCollection.concat(integrationCollection)); — diamondracer
– diamondracer, Commented Oct 4, 2016 at 21:10

Pradeep · Accepted Answer · 2016-10-04 23:42:24Z

1

This is because of async behavior of framework. Change following of your code:

this.integrationService.getIntegrations().then(integrationCollection => this.integrationCollection = integrationCollection);
alert('integrationCollection count: ' + this.integrationCollection.length);

to:

this.integrationService.getIntegrations().then(integrationCollection => {
this.integrationCollection = integrationCollection;
alert('integrationCollection count: ' + this.integrationCollection.length);
 });

Do you see the difference? There are other ways as well to bring synchronus behavior in your code when you need i.e. Observable.forkJoin. Hope you got the idea.

answered Oct 4, 2016 at 23:42

Pradeep

3,2761 gold badge25 silver badges37 bronze badges

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

1 Comment

diamondracer Over a year ago

Thanks, very helpful.

basarat · Accepted Answer · 2016-10-04 21:49:01Z

0

In your code :

integrationCollection => this.integrationCollection.concat(integrationCollection)

You probably want to assign the result of the concat somewhere e.g. :

integrationCollection => this.integrationCollection = this.integrationCollection.concat(integrationCollection)

More

But the length property returns 0.. why would this be ??

Most likely an ordering issue. You should check then length after the data has actually returned from the server.

answered Oct 4, 2016 at 21:49

basarat

278k60 gold badges475 silver badges528 bronze badges

Collectives™ on Stack Overflow

Angular2/typescript - unexpected array behavior (such as length is 0 when it is really not)

2 Answers 2

1 Comment

More

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

More

Comments

Your Answer

Sign up or log in

Post as a guest

Related