Patch causing issues in AngularJS 1.6 due to modifications in Array.prototype.filter by monkeys

Question

Patch causing issues in AngularJS 1.6 due to modifications in Array.prototype.filter by monkeys

ngSwitchWhen Issue: Error Message 'Cannot read property 'NaN' of undefined'

After successfully implementing a filter method on the Array prototype with Angular 1.5.7, I faced an issue when upgrading to version 1.6.10. The same code that used to work is now throwing an error message

'Cannot read property 'NaN' of undefined'

in the browser console.

Snippet from HTML:

  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <code>selection={{selection}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="selection">
      <div class="animate-switch" ng-switch-when="settings|options" ng-switch-when-separator="|">Settings Div</div>
      <div class="animate-switch" ng-switch-when="home">Home Span</div>
      <div class="animate-switch" ng-switch-default>default</div>
  </div>

Snippet from Controller:

 Array.prototype.filter = function (predicateFunction) {
   let results = [];
      this.forEach((item) => {
        if (predicateFunction(item)) {
          results.push(item);
        }
      });
    return results;
  };

  $scope.items = ['settings', 'home', 'options', 'other'];
  $scope.selection = $scope.items[0];

To reproduce this issue, you can view the example on Plunker.

javascript arrays angularjs angularjs-directive angularjs-1.6

Answer 1

Answer №1

There seems to be an issue with your custom implementation of Array.prototype.filter:

 Array.prototype.filter = function (predicateFunction) {
   let results = [];
      ̶t̶h̶i̶s̶.̶f̶o̶r̶E̶a̶c̶h̶(̶(̶i̶t̶e̶m̶)̶ ̶=̶>̶ ̶{̶
      this.forEach((item,index,array) => {
        ̶i̶f̶ ̶(̶p̶r̶e̶d̶i̶c̶a̶t̶e̶F̶u̶n̶c̶t̶i̶o̶n̶(̶i̶t̶e̶m̶)̶)̶ ̶{̶
        if (predicateFunction(item,index,array)) {
          results.push(item);
        }
      });
    return results;
  };

The correct way to handle the callback would be by passing three arguments:

the value of the element
the index of the element
the Array object being traversed

Update

According to the ES5 Standard, it is recommended to use this polyfill instead:

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
   
    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
   
    res.length = c; // shrink down array to proper size
    return res;
  };
}

To learn more, visit MDN JavaScript Reference - Array.prototype.filter polyfill.

Answer 2

There seems to be an issue with your custom implementation of Array.prototype.filter:

 Array.prototype.filter = function (predicateFunction) {
   let results = [];
      ̶t̶h̶i̶s̶.̶f̶o̶r̶E̶a̶c̶h̶(̶(̶i̶t̶e̶m̶)̶ ̶=̶>̶ ̶{̶
      this.forEach((item,index,array) => {
        ̶i̶f̶ ̶(̶p̶r̶e̶d̶i̶c̶a̶t̶e̶F̶u̶n̶c̶t̶i̶o̶n̶(̶i̶t̶e̶m̶)̶)̶ ̶{̶
        if (predicateFunction(item,index,array)) {
          results.push(item);
        }
      });
    return results;
  };

The correct way to handle the callback would be by passing three arguments:

the value of the element
the index of the element
the Array object being traversed

Update

According to the ES5 Standard, it is recommended to use this polyfill instead:

if (!Array.prototype.filter){
  Array.prototype.filter = function(func, thisArg) {
    'use strict';
    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
        throw new TypeError();
   
    var len = this.length >>> 0,
        res = new Array(len), // preallocate array
        t = this, c = 0, i = -1;
    if (thisArg === undefined){
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func(t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
    else{
      while (++i !== len){
        // checks to see if the key was set
        if (i in this){
          if (func.call(thisArg, t[i], i, t)){
            res[c++] = t[i];
          }
        }
      }
    }
   
    res.length = c; // shrink down array to proper size
    return res;
  };
}

To learn more, visit MDN JavaScript Reference - Array.prototype.filter polyfill.

Patch causing issues in AngularJS 1.6 due to modifications in Array.prototype.filter by monkeys

ngSwitchWhen Issue: Error Message 'Cannot read property 'NaN' of undefined'

Answer №1

Update

Similar questions

Modifying CSS property values by handling a returned validation error

How can I ensure that TypeORM, Type GraphQL, Apollo Server, and Azure Functions work together seamlessly?

Using AngularJS to bind radio buttons to ng-model

Display the modal content while maintaining its current styling

Tips for incorporating a last or recently visited feature similar to Google Docs using MongoDB

Leveraging JSON data in a client-side JavaScript script

How can I dynamically insert a variable string into a link tag using React and TypeScript?

How can one display an integer value instead of a scientific value in an AngularJS view?

Value entered is not being stored in the array

Tips on utilizing the event.preventDefault() method within AngularJS?

Video on Youtube keeps playing even after the overlay is closed

Combining and grouping objects by their IDs in a JavaScript array

AngularJS Element Connections

Encountering a Null Pointer Exception when trying to locate an element on an AngularJS website using Selenium

Check if a value falls within the range of an array

Interactive calendar using Php and Javascript/Ajax

Displaying or concealing dropdown menus based on a selected option

A dropdown menu generated from a Google Sheet script that allows for the input of custom text alongside predefined

Organize chat messages based on date using JavaScript

I could really use some guidance on how to begin with the Node.JS app file in BlueMix