We have a for loop that populates an observable array in knockout. For some reason, only the first item started being loaded, even though we hadn’t made any changes to the loop, and all the data was still being sent down.
The loop starts off:
for (i = 0; i < ts.Weeks.length; i++) {
I stepped through the loop using Chrome debugger and found that i=0 consistently, all the way until the very end of the body, when we added the data object to the observable array:
self.Weeks.push(week);
At this point, it jumped to i=10 right before going back to the top. Of course, with only a half-dozen data items, the loop then exited. But, nothing else in the loop modifies i, and where was 10 coming from anyways??
Since the array was observable, when it was updated with push, knockout also called all the various “computed” functions. Also since the for loop variable “i” was declared without var, it was actually in the global scope! One of those computed (I didn’t figure out which one), or a library that they used, also had an “i” that was in the global scope, and the two variables were clobbering each other.
Although I didn’t determine the other perpetrator code, simply updating the loop, by adding var, to read
for (var i = 0; i < ts.Weeks.length; i++) {
solved the issue by ensuring the variable i was function scoped.
It’s easy to forget in languages like C# that don’t do global scope by default… JavaScript does do global scope by default!