The For Loop is not working in an appropriate way (Angular2)

Question

I'm wondering why am i getting a weird behavior using For Loop in Angular2 (TypeScript). I made this loop

 loadAllQuestions() {

            this.questionService.loadAllQuestions()
                .map(res=>res.json())
                .subscribe(res=>{
                    this.listQuestion = res.questions;
                    for (var q in this.listQuestion){
                        this.propositionService.findPropositionByQuestion(this.listQuestion[q].wordingQ)
                            .map(res=>res.json())
                            .subscribe(res=>{
                                console.log(this.listQuestion[q]);
                            });
                    }
           });
     }

So that for every Question (in listQuestion) I called a service that would find all the propositions for this question (findPropositionByQuestion) using its wording (wordingQ) ; the problem is that it seems the loop is not working , when making the console.log(this.listQuestion[q]) it shows off only the last Question in the listQuestion duplicated as much as the number of the indexes in the listQuestion (so if i have 3 Questions, it shows me the last Question 3 times and so on..). For more explication: here i have 2 loaded Questions :

And here what the console.log is showing me :

Any Help please ?

Possible duplicate of [Javascript infamous Loop issue?](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) — Yury Tarabanko, May 23 '16 at 11:50

score 2 · Answer 1 · answered May 23 '16 at 11:59

2

You can make q variable block scoped using let keyword.

for (let q in this.listQuestion){ //var --> let
    this.propositionService
        .findPropositionByQuestion(this.listQuestion[q].wordingQ)
        .map(res=>res.json())
        .subscribe(res=>{
            console.log(this.listQuestion[q]);
         });
}

answered May 23 '16 at 11:59

Yury Tarabanko

44,270
9
84
98

Here it required Emascript 6 or higher, Thanks anyway :) – SeleM May 23 '16 at 12:47
@Selem Like if arrow functions don't :) You are using typescript anyway. Doesn't it handle let to var transformation for you? – Yury Tarabanko May 23 '16 at 13:54
https://www.typescriptlang.org/play/#src=for%20(let%20q%20in%20obj)%7B%0D%0A%20%20%20%20doSomethingAsync(res%3D%3E%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20obj%5Bq%5D%0D%0A%20%20%20%20%7D)%3B%0D%0A%7D – Yury Tarabanko May 23 '16 at 14:01
no as i told you ; an error occured : Emascript 6 or higher is required :) (i liked your answer ;) ) – SeleM May 23 '16 at 15:52

score 1 · Accepted Answer · edited May 23 '17 at 12:17

You need to split your code with an additional method:

loadAllQuestions() {
  this.questionService.loadAllQuestions()
    .map(res => res.json())
    .subscribe(res => {
      this.listQuestion = res.questions;
      for (var q in this.listQuestion) {
        this.findProposition(this.listQuestion[q]);
      }
    };
}

findProposition(question) {                          
  this.propositionService.findPropositionByQuestion(
    question.wordingQ)
      .map(res => res.json())
      .subscribe(res => {
        console.log(question);
        console.log(res);
      });
}

This question could help you to understand why you have several times the same element displayed in trace:

JavaScript closure inside loops – simple practical example

score 1 · Answer 3 · answered May 23 '16 at 11:59

1

I suggest you try for (var q of this.listQuestion){...} instead of for (var q in this.listQuestion){...}

answered May 23 '16 at 11:59

musale

534
8
18

The For Loop is not working in an appropriate way (Angular2)

3 Answers3