Typescript: Access variable outside of a loop

Question

I've created an array and want to access the created elements outside of the loop. I know that they are not in the scope and writing this. infront of it wont make them accessible either.

colIdx = colIdx + this.columns.findIndex(c => c.editable);
this.focusInput(rowIdx, colIdx);
this.autocompletes.toArray().forEach(el => {
   console.log(el);
})

I have a table with lots of input fields with an autocomplete function and a suggestion panel. I also have a custom method which lets the user tab with the enter key. However at first, tabbing with enter didnt close the suggestion panel of the autocomplete hence after a while all the suggestion panels where open.

Thats why I've created the method above. You could actually ignore the first two lines because they are needed for the tabbing with enter.

this.autocompletes is a Querylist with all my input elements. I've turned them into an array and called each element el. This way I'm able to call a closePanel() method on el in order to close the suggestion panels of the autocomplete method. However doing it this way shuts down the suggestion panels of ALL el elements. Thats why I need the index of el the user has set focus on and close this one.

In order to do so I have to access el outside the for-loop it has been created in.

what do you actually want? its unclear. what are you trying to do? — Hey24sheep, Jan 25 '18 at 08:11
Why do you need that `el` outside, you mean that `forEach` for filtering then you can `.find` or `.filter` or `.some` — Aswin Ramesh, Jan 25 '18 at 08:12
Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Serge K., Jan 25 '18 at 08:13

BlackBeard · Answer 1 · 2018-01-25T08:14:08.110

1

You can initialize an empty array outside the loop like var arr: type = emptyArr[]; and then push the data (el) in it from inside the loop.

To push do something like: arr.push(el) from inside the loop and then access it outside the loop.

edited Jan 25 '18 at 08:14

answered Jan 25 '18 at 08:11

BlackBeard

10,246
7
52
62

score 0 · Answer 2 · answered Jan 25 '18 at 08:12

0

The easiest way would be to just assign it them to an array outside the scope of the loop:

elements: any[] = [];
colIdx = colIdx + this.columns.findIndex(c => c.editable);
this.focusInput(rowIdx, colIdx);
this.autocompletes.toArray().forEach(el => {
    console.log(el);
    this.elements.push(el);
});

// You can now loop over `this.elements` and do what you need with them.

answered Jan 25 '18 at 08:12

Matt Brewerton

866
1
6
23

this will just push all the el in the elements array causing repetative and even wrong values – Hey24sheep Jan 25 '18 at 08:13
Not sure why you'd get "wrong" values. Repetitive, yes but it's basically what the question is asking for. I'm not really sure why they want to loop over and then handle something outside but without that context you can't give a much better answer. – Matt Brewerton Jan 25 '18 at 08:15
wrong values, like what if some value is removed from autocompletes but it will still be present in elements. Well, yes depends what he is doing with all that but it still can cause wrong plus repetitive values. – Hey24sheep Jan 25 '18 at 08:16

score 0 · Answer 3 · answered Jan 25 '18 at 08:24

this.autocompletes is a Querylist with all my input elements

This means autocompletes won't change and you can save it in your Init call into a local variable.

ex: if your form have 4 input it will still contain 4 unless you are removing it from the dom. Save it in a local variable during your create/init. depending how you have written your code.

Here is what you can do.

//do not do .toArray again and again its just not usefull as your data is constant
elements: Array<any> = this.autocompletes.toArray();

...

elements.forEach(el => {
   //work on elements here
   //to check focus on el you could do something like this el.is(":focus")
});

Typescript: Access variable outside of a loop

3 Answers3