0

I am new to javascript from C# and have a feeling that I am not quite understanding some of the fundamentals of how variable assignment and manipulation works. I have a function that runs to filter some results based on year and class group. This works as intended the first time the function is run.

thisSchoolArray is populated externally and retains it's values constantly. It is filteredArray that does not update as intended. I would imagine that each time the function runs, it puts all the results of the filter into filteredArray. Below is the code: 

function UpdateResults() {
  var filteredArray = thisSchoolArray.filter(function (item) {
    return item.TestResults.some(e => e.TestYear === yearToDisplay);
  });
  console.log(filteredArray); //Works first time, empty next time the function runs
  var filteredClass = filteredArray.filter(x => x.ClassGroup === classToDisplay);
  filteredResults = filteredClass;
  console.log(filteredResults); //Works first time, empty next time the function runs
  table.setData(filteredResults);
  UpdateRoundScores();
}

Here is whats logged to the console: enter image description here

Phil
  • 157,677
  • 23
  • 242
  • 245
8r3nd4n
  • 89
  • 12
  • If `filteredArray` becomes empty on the second call, it means that `thisSchoolArray` or `yearToDisplay` has changed. It has either become an empty array itself or no longer has any elements matching `yearToDisplay` – Phil Oct 11 '19 at 00:52
  • 1
    I suspect the problem is this: https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays. Change your log statements to `console.log(filteredArray.slice())` or `console.log(JSON.stringify(filteredArray))`, so you get a snapshot that doesn't change. – Barmar Oct 11 '19 at 00:52
  • Either that, or `yearToDisplay` or `classToDisplay` are changing. Can you create a [mcve] that demonstrates the problem? – Barmar Oct 11 '19 at 00:53
  • Oh yeah, don't use `console.log` for debugging. Use your debugger instead ~ https://developers.google.com/web/tools/chrome-devtools/javascript – Phil Oct 11 '19 at 00:54
  • @Phil Isn't DevTools the same thing as the console? – Barmar Oct 11 '19 at 00:55
  • @Barmar Chrome now adds a little _i_ symbol next to logged objects that have changed. Since that's not appearing, it's probably not that issue. – Phil Oct 11 '19 at 00:56
  • @Barmar I'm talking about using the actual JavaScript debugger, eg setting breakpoints, stepping through, etc. As your linked post indicates, the console is not always a good source of truth. – Phil Oct 11 '19 at 00:57
  • FYI, you can save some CPU cycles by combining your two filters... `.filter(({ ClassGroup, TestResults}) => ClassGroup === classToDisplay && TestResults.some(e => e.TestYear === yearToDisplay))` – Phil Oct 11 '19 at 01:01
  • @Phil I wondered what that was :) Thanks for the info. – Barmar Oct 11 '19 at 01:01
  • @Phil thanks for those suggestions regarding the console.log and debugger and optimization, and pointing in the right direction. – 8r3nd4n Oct 11 '19 at 01:28

1 Answers1

1

Turns out that the yearToDisplay which I was changing via a dropdown was the culprit. The dropdown value would come in as a string when I was looking for an int to pass into the yearToDisplay variable. Another one of those simple but overlooked issues.The fix was 

yearToDisplay = parseInt(dropdown.value)
8r3nd4n
  • 89
  • 12
  • FYI, it's always recommend to use the 2nd arg for parseInt, ie `parseInt(dropdown.value, 10)` – Phil Oct 11 '19 at 01:42
  • Why would that be better @Phil? And since it's a year, should use parseInt(dropdown.value, 4) as there are only ever 4 numbers in a year? – 8r3nd4n Oct 11 '19 at 01:47
  • I suggest you read the documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt – Phil Oct 11 '19 at 02:26