An issue with Angular $parse arises when attempting to filter or order hash values that begin with numbers

Question

An issue with Angular $parse arises when attempting to filter or order hash values that begin with numbers

I have encountered a challenging situation with my angular orderBy filter. It works perfectly except when the expression starts with a hash followed by an integer.

Check out this fiddle to see the issue in action.

The filter structure I'm using looks like this:

[{'ced8d91c7921a884a131fcc7086239':{'value':'somevalue1'},
  '0a9308d3092d092718e457d927f110': {'value':'anotherval'}},
 {'ced8d91c7921a884a131fcc7086239':{'value':'axxfi'},
  '0a9308d3092d092718e457d927f110': {'value':'zziojasf'}}];

A filter predicate like 'somehash.value' will only work if the hash starts with a letter.

I need to filter based on hash ids because the data is dynamic and Angular doesn't know the property names beforehand.

Even attempting to filter in JS using $filter results in the same error.

In reviewing the call stack, it seems that the problem lies within the Lexer.lex function, specifically at this point:

else if (this.isNumber(ch) || ch === '.' && this.isNumber(this.peek())) {
    this.readNumber();

Any suggestions to fix this issue?

javascript angularjs hash

Answer 1

Answer №1

Create a Custom Filter for Sorting Hash Keys

When dealing with AngularJS, instead of struggling with the Lexer or $parse, it's often more efficient to implement a custom filter. By doing this, we can circumvent any issues with the Lexer and address our problem directly before reaching out to the Angular Team for further assistance.

Please note: This solution is specifically tailored for AngularJS 1.2.1 as indicated in your fiddle. Compatibility with newer versions may vary.

The following code snippet showcases a straightforward pseudo associative array sorter that utilizes a predicate string expression to facilitate value comparison:

In order to prevent referencing conflicts, we must transfer the values from arrOfObjects to our output array arr. Directly using angular.copy is not recommended due to its potential impact on digest cycles.

Below is the custom filter implementation, and you can access an updated fiddle here:

angular.module('orderByFail').filter('orderByHashKey', [
  function orderByHashKeyFilter() {

    // Parameters: array of objects, property expression as a predicate,
    //             and reverse flag
    // NOTE: The property expression is a dot-notation string (e.g., obj.key1.key2) rather than an Angular expression
    return function(arrOfObjects, propertyExp, reverse) {
      
      if (typeof propertyExp === 'undefined') return arrOfObjects;

      propertyExp = propertyExp.split('.');
      var len = propertyExp.length;
      var arr = [];

      for (var i = 0; i < arrOfObjects.length; i++) { arr.push(arrOfObjects[i]); }

      arr.sort(function (a, b) {
        var i = 0;

        while(i < len) {
          a = a[propertyExp[i]];
          b = b[propertyExp[i]];
          i++;
        }

        if (a < b) {
          return -!reverse | 1;
        } else if (a > b) {
          return -!!reverse | 1;
        } else {
          return 0;
        }
      });
      return arr;
    }
  }
]);

Answer 2

Create a Custom Filter for Sorting Hash Keys

When dealing with AngularJS, instead of struggling with the Lexer or $parse, it's often more efficient to implement a custom filter. By doing this, we can circumvent any issues with the Lexer and address our problem directly before reaching out to the Angular Team for further assistance.

Please note: This solution is specifically tailored for AngularJS 1.2.1 as indicated in your fiddle. Compatibility with newer versions may vary.

The following code snippet showcases a straightforward pseudo associative array sorter that utilizes a predicate string expression to facilitate value comparison:

In order to prevent referencing conflicts, we must transfer the values from arrOfObjects to our output array arr. Directly using angular.copy is not recommended due to its potential impact on digest cycles.

Below is the custom filter implementation, and you can access an updated fiddle here:

angular.module('orderByFail').filter('orderByHashKey', [
  function orderByHashKeyFilter() {

    // Parameters: array of objects, property expression as a predicate,
    //             and reverse flag
    // NOTE: The property expression is a dot-notation string (e.g., obj.key1.key2) rather than an Angular expression
    return function(arrOfObjects, propertyExp, reverse) {
      
      if (typeof propertyExp === 'undefined') return arrOfObjects;

      propertyExp = propertyExp.split('.');
      var len = propertyExp.length;
      var arr = [];

      for (var i = 0; i < arrOfObjects.length; i++) { arr.push(arrOfObjects[i]); }

      arr.sort(function (a, b) {
        var i = 0;

        while(i < len) {
          a = a[propertyExp[i]];
          b = b[propertyExp[i]];
          i++;
        }

        if (a < b) {
          return -!reverse | 1;
        } else if (a > b) {
          return -!!reverse | 1;
        } else {
          return 0;
        }
      });
      return arr;
    }
  }
]);

Answer 3

Answer №2

Instead of specifying a predicate, consider writing a getter function. Check out this example here

(function () {
  angular.module( 'orderByFail', [  
]);
    
function MyCtrl($scope, $filter, $log) {
    $scope.reverse = true;
    $scope.sortColumn2 = '0a9308d3092d092718e457d927f110.value';
    
    $scope.entries = [{'ced8d91c7921a884a131fcc7086239':{'value':'somevalue1'},
                       '0a9308d3092d092718e457d927f110': {'value':'anotherval'}
                     },
                   {'ced8d91c7921a884a131fcc7086239':{'value':'axxfi'},
                    '0a9308d3092d092718e457d927f110': {'value':'zziojasf'}
                   }];
    
    $scope.sort1 = function() {
        $scope.reverse = !$scope.reverse;
        $scope.sortColumn1 = 'ced8d91c7921a884a131fcc7086239.value'
    }
    
     $scope.sort2 = function() {
        $scope.reverse = !$scope.reverse;
        $scope.sortColumn2 = '0a9308d3092d092718e457d927f110.value'
     }
    
     $scope.sort = function(val) {
         var cols = $scope.sortColumn2.split('.');
         angular.forEach(cols, function(col, colKey) {
             val = val[col];
         });
         return val;
     }
}
    
angular
  .module('orderByFail')
  .controller('MyCtrl', MyCtrl)
  ;
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="orderByFail">
  <div ng-controller="MyCtrl">
    <button ng-click="sort1()">This sort works</button>
    <div ng-repeat="entry in entries | orderBy:sortColumn1:reverse">{{entry['ced8d91c7921a884a131fcc7086239'].value}}</div>
    <button ng-click="sort2()">This sort will error in console</button>
    <div ng-repeat="entry in entries | orderBy: sort:reverse">{{entry['0a9308d3092d092718e457d927f110'].value}}</div>
  </div>
</div>

Answer 4

Instead of specifying a predicate, consider writing a getter function. Check out this example here

(function () {
  angular.module( 'orderByFail', [  
]);
    
function MyCtrl($scope, $filter, $log) {
    $scope.reverse = true;
    $scope.sortColumn2 = '0a9308d3092d092718e457d927f110.value';
    
    $scope.entries = [{'ced8d91c7921a884a131fcc7086239':{'value':'somevalue1'},
                       '0a9308d3092d092718e457d927f110': {'value':'anotherval'}
                     },
                   {'ced8d91c7921a884a131fcc7086239':{'value':'axxfi'},
                    '0a9308d3092d092718e457d927f110': {'value':'zziojasf'}
                   }];
    
    $scope.sort1 = function() {
        $scope.reverse = !$scope.reverse;
        $scope.sortColumn1 = 'ced8d91c7921a884a131fcc7086239.value'
    }
    
     $scope.sort2 = function() {
        $scope.reverse = !$scope.reverse;
        $scope.sortColumn2 = '0a9308d3092d092718e457d927f110.value'
     }
    
     $scope.sort = function(val) {
         var cols = $scope.sortColumn2.split('.');
         angular.forEach(cols, function(col, colKey) {
             val = val[col];
         });
         return val;
     }
}
    
angular
  .module('orderByFail')
  .controller('MyCtrl', MyCtrl)
  ;
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="orderByFail">
  <div ng-controller="MyCtrl">
    <button ng-click="sort1()">This sort works</button>
    <div ng-repeat="entry in entries | orderBy:sortColumn1:reverse">{{entry['ced8d91c7921a884a131fcc7086239'].value}}</div>
    <button ng-click="sort2()">This sort will error in console</button>
    <div ng-repeat="entry in entries | orderBy: sort:reverse">{{entry['0a9308d3092d092718e457d927f110'].value}}</div>
  </div>
</div>

An issue with Angular $parse arises when attempting to filter or order hash values that begin with numbers

Answer №1

Create a Custom Filter for Sorting Hash Keys

Answer №2

Similar questions

Angular 2: Executing a function after ngFor has completed

Unable to maintain constant slide down feature for jQuery dropdown

The Vue router-view is not showing certain views as expected

Issue with Mongoose.connect functionality

Karma test encountered a provider that could not be identified

Tips for implementing vue-multiselect tagging within an ASP.NET solution in Visual Studio 2017

What is the best way to reset the 3rd dynamic dropdown menu once a new selection is made in the 1st dropdown menu?

Having trouble with the checkbox functionality. Attempting to dynamically toggle gridlines in a flot chart

External API data is shown in the browser console but appears as undefined on the page

How to toggle classes on specific items generated with Vue JS's v-for directive

Enhancing Nativescript elements with pseudo selectors

Updating HTML select options based on the result of another select can be easily achieved by using JavaScript and

Automatically fill in text fields with data from a different collection when an item is selected in a collection select in Rails

A website utilizing single-page architecture and HTML navigation through servlet technology, all without the need to open additional pages

What is the best way to iterate through an ID using jQuery?

What is the best way to eliminate the ng-hide class dynamically in AngularJS?

Determine in VueJS v-for loop if the previous element in the object has changed, such as switching cities

Using jQuery to rearrange an ordered list by moving items with a specific class to the top

What mechanism does angularjs employ to detect the $dirty state in the absence of a form tag?

One method for assigning a unique identifier to dynamically generated buttons with jQuery