OrderBy filter angular with nested objects throws error

Question

I have an array like this:

[{
    "type": "adserver",
    "stats": {
        "10021": 48082,
        "10023": 1741
    }
}, {
    "type": "adserver",
    "stats": {
        "10021": 12312,
        "10023": 23
    }
}, {
    "type": "adserver",
    "stats": {
        "10021": 53423,
        "10023": 54
    }
}, {
    "type": "adserver",
    "stats": {
        "10021": 12345,
        "10023": 12
    }
}]

I'm trying to use:

ng-repeat = "array | orderBy:'stats.10021'"

and it throws this error:

Syntax Error: Token '.10021' is an unexpected token at column 6 of the expression [stats.10021] starting at [.10021].

<div ng-repeat="single in array | orderBy:'stats.10021'"> <businesscard>{{single.type}} {{single.stats}}</businesscard> </div> — Zubair sadiq
– Zubair sadiq, Commented Jun 15, 2016 at 10:27

Endre Simo · Accepted Answer · 2016-06-15 10:21:49Z

1

The error is related to the fact that you are trying to access an object property which keys are numbers. You have to access the properties with square parameters.

You cannot access object properties with dot notation which keys are numbers!

Try this instead:

ng-repeat = "(key, value) in array | orderBy:'stats['10021']"

answered Jun 15, 2016 at 10:21

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2016-06-15 10:20:22Z

0

Javascript object property names can not start with a number so you can only access them as string name using [] notation

Try

orderBy:stats['10021']

answered Jun 15, 2016 at 10:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Zubair sadiq · Accepted Answer · 2016-06-15 10:23:50Z

0

jsfiddle

<div ng-app="myApp" ng-controller="Ctrl">
  <div ng-repeat="single in array | orderBy:'stats.10021'">
     <businesscard>{{single.type}} {{single.stats}}</businesscard>
  </div>
</div>

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.array = [{"type":"adserver","stats":{"10021":48082,"10023":1741}}, {"type":"adserver","stats":{"10021":12312,"10023":23}}, {"type":"adserver","stats":{"10021":53423,"10023":54}}, {"type":"adserver","stats":{"10021":12345,"10023":12}}]
});

output

adserver {"10021":12312,"10023":23}

adserver {"10021":12345,"10023":12}

adserver {"10021":48082,"10023":1741}

adserver {"10021":53423,"10023":54}

answered Jun 15, 2016 at 10:23

Zubair sadiq

5006 silver badges23 bronze badges

Collectives™ on Stack Overflow

OrderBy filter angular with nested objects throws error

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related