Angular/Typescript doesn't execute for loop

Question

I'm fetching data with promise. I'm using this callback function to loop through the value.

selectedAppIdCalculator() {
this.fetchData2().then( value => {

  console.log("value: ", value);


  for (let app of value) {
    console.log("in for loop");
  }
});
}

The response value is not null, because it logs first the value. The value is a array with json objects.

But the for loop is never executed. Why?

In the debugging mode I noticed something weird.

The value is empty. Also the value in the log console is empty:

But when running normally it logs normally the response value. I'm really confused.

@SachilaRanawaka Please Note: you definitely can use const in a for-of loop: const value = ['a', 'b', 'c']; for (const app of value) { console.log(app); } — Fenton
– Fenton, Commented Jun 6, 2018 at 10:54
@jozofe - the most likely issue is that value isn't an array... a common case would be where the array is deeper, i.e. value.someCollection. As Titian said, you need to share what is in value so we can answer the question. — Fenton
– Fenton, Commented Jun 6, 2018 at 10:57

Pierre Mallet · Accepted Answer · 2018-06-06 11:12:42Z

1

Ok all your problem is that you dont wait the fetchAppData response before resolving.

You resolve your promise after 100ms with this.reduceAppList as an empty Array. Later when fetchAppData response is received you populate this array. Thats why the data are displayed in the console ( since the console use Object reference to display data ) and not in debug mode (since the breakpoint is set before populating the Array.

You should change the fetchData2 function to this :

fetchData2() {
   this.reducedAppList = [];
   this.httpService.fetchAppData().then(response => {
       this.appList = this.httpService.statistics;
       for (const app of this.appList) {
           if (app.appMailings !== null) {
               this.reducedAppList.push(app);
           }
       }
       return this.reducedAppList;
   });
}

answered Jun 6, 2018 at 11:12

Pierre Mallet

7,2412 gold badges22 silver badges31 bronze badges

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

Comments

Ric · Accepted Answer · 2018-06-06 11:23:40Z

0

It looks as though your resolve from fetchData2 is outside of the promise. If so, resolve is called before any data is available and needs to be just outside the scope of the for.

This is because of the async nature, and your resolve completes before the request is complete and returns instead the initialised value of reducedAppList

Should look something like this:

for (const app of this.appList) {
   // logic ommitted
}
resolve(this.reducedAppList); // move inside the `.then(response => ....`

edited Jun 6, 2018 at 11:23

answered Jun 6, 2018 at 11:05

Ric

13.3k3 gold badges32 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular/Typescript doesn't execute for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related