CODEWITHSUNDEEP
javascriptangularjs
yavg
yavg

Reputation: 3051

Error generating ng-repeat using a descending order filter

I have an object that I try to filter the data from highest to lowest and limiting it to 8. I am getting this error that I do not know how to solve. What is happening and how can I solve it? thank you very much.

https://jsfiddle.net/bg3mkwvL/

  <div class="col-xs-3" ng-repeat='item in people | orderBy: "-score" | limitTo: 8'>
    <p>
      {{item.name}}  {{item.score}}
    </p>
  </div>

  $scope.people={ 
    "juan": { "name": "juan", "score":0},
    "pedro": { "name": "pedro", "score":0},
    "goku": { "name": "goku", "score":0},
  }

I need to use this syntax: 

"juan": {"name": "juan", "score": 0}

Then I need to write for example '

 console.log ($scope.people['juan'])

and I need get the Object without having to make cycles.

enter image description here

Upvotes: 1

Views: 34

Answers (3)

quirimmo
quirimmo

Reputation: 9988

From AngularJS 1.4 this is the implementation of ordering in ng-repeat for objects

Version 1.4 removed the alphabetic sorting. We now rely on the order returned by the browser when running for key in myObj.

So if you can't change the structure of your model, re order the object in order to put the score as the first property:

$scope.people={ 
    "juan": { "score": 2, "name": "juan" },
    "pedro": { "score":0, "name": "pedro" },
    "goku": { "score":1, "name": "goku" }
  }

And it should work even with your structure without specifying any orderByin the ng-repeat

If you want to reorder the object dynamically, you can do the following:

for (var key in $scope.people) {
  $scope.people[key] = Object.assign({score: $scope.people[key].score}, $scope.people[key]);
}

Upvotes: 0

swapnesh
swapnesh

Reputation: 26732

You actually need to transform your data into a logical manner to iterate the array.

Working Plnkr - http://plnkr.co/edit/obGuS8Cg28roOaNzrzfV?p=preview

Code iteration -

$scope.listData = $scope.people.map(function(data){
  var tmp = Object.keys(data);
  return data[tmp];
})

Code -

var app = angular.module('testApp', []);


app.controller('testController', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
      $scope.people= [
        {
          "juan": { "name": "juan", "score":8}
        },
        {
          "pedro": { "name": "pedro", "score":2}
        },
        {
          "goku": { "name": "goku", "score":7}
        },
      ];
      
      $scope.listData = $scope.people.map(function(data){
        var tmp = Object.keys(data);
        return data[tmp];
      })
}]);
<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="testApp" ng-controller="testController">
 <div class="container">
    <div class="row">
      <div class="col-xs-3" ng-repeat='data in listData | orderBy: "-score"'>
        <p>
          {{data.name}}  {{data.score}}
        </p>
      </div>
    </div>
  </div>
</div>

  </body>

</html>

Upvotes: 1

Dr. X
Dr. X

Reputation: 2930

you can modify your json object array as below;

$scope.people= [
  { "name": "juan", "score":0},
  { "name": "pedro", "score":0},
  { "name": "goku", "score":0},
]

Upvotes: 2

Related Questions