CODEWITHSUNDEEP
javascriptangularjsjson
d_z90
d_z90

Reputation: 1263

ng-repeat orderBy issue

through ng-repeat I want to plot videos in a defined order according to the id number (from 1 to 5).

<div ng-app="myApp" ng-controller="Ctrl">
    <div ng-repeat="vidObj in videoObjects | orderBy: 'id'">
        <span>{{vidObj.id}}</span>  
    </div>
</div>

I try to apply the filter orderBy, but apparently is not working properly. Do you have an idea of what I am doing wrong? This is a JSfiddle with the complete code.

Thanks in advance for your replies!

EDIT: Thank you for your replies, but the json file can not change.

Upvotes: 0

Views: 140

Answers (4)

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

The Javascript : 

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.videoObjects = {
        "Frank": {
          "id": 1
        },
        "Gerard": {
          "id": 2
        },
        "Rein": {
          "id": 3
        },
        "Ida": {
          "id": 4
        },
        "Ellen": {
          "id": 5
        }
      };

 $scope.arr = Object.keys($scope.videoObjects).map(function(k) { return $scope.videoObjects[k] });
console.log($scope.arr);

    });

and the HTML

<div ng-app="myApp" ng-controller="Ctrl">
    <div ng-repeat="vidObj in arr | orderBy: 'id'">
        <span>{{vidObj.id}}</span>  
    </div>
</div>

I updated your fiddle with this code.. It is working well.

Here is the link http://jsfiddle.net/tirthrajbarot/fc16op6u/39/

Upvotes: 1

Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

Try a valid json, somthing like:

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.videoObjects = [
         {
          "id": 1,
          "Frank":'name'
        },
         {
          "id": 2,
          "Gerard":'name'
        }
      ];

    });

working fiddle

Upvotes: -2

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

I think that the built-in orderBy filter works with arrays.

The documentation says "The collection can be an Array or array-like object (e.g. NodeList, jQuery object, TypedArray, String, etc)."

Check this example in the documentation that says "Example Ordering a table with ngRepeat".

Upvotes: 1

Sachin K
Sachin K

Reputation: 192

I modified your Json and it works

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.videoObjects = [
        {
            "name": "Frank",
          "id": "1"
        },
        {
            "name": "Gerard",
          "id": "2"
        },
        {
          "name": "Rein",
          "id": "3"
        },
        {
            "name": "Ida",
          "id": "4"
        },
        {
          "name": "Ellen",
          "id": "5"
        }
      ]
    });

Upvotes: 1

Related Questions