AngularJS : orderBy on array not working

Question

I am trying to order a list i'm showing in the front end. This is the json I am passing it from the my angular controller:

My Json Sample here

I am passing it an array filled with some amount of those arrays.

I want to order the list by the internalRanking, which I can make a string or int, but it will not always be the same length. I have tried looking online but I don't think I need to create a custom filter as it is iterating over an array containing some amount of the above array. My HTML is:

<form class="form-inline">
  <input ng-model="query" type="text" placeholder="Filter by" autofocus>
</form>
<ul ng-repeat="rankingData in allRankingData | filter:query | orderBy:allRankingData[0].entries[0].internalRanking">
  <li>{{index}}</li>
  <li>{{rankingData[0].entries[0].playerOrTeamName}}</li>
  <li>{{rankingData[0].tier}} {{rankingData[0].entries[0].division}} - {{rankingData[0].entries[0].leaguePoints}}LP</li>
  <li>{{rankingData[0].entries[0].internalRanking}}</li>
</ul>

It just isn't ordering anything. The last list line of

{{rankingData[0].entries[0].internalRanking}}

is printing out the value fine, so that reference is correct.

Does anyone have any ideas? I can post more code if necessary

rankingData is one object in the array of allRankingData. You won't need to index it, meaning, leave off the "[0]" of rankingData[0].entries... You should also have a sub ng-repeat for each of the entries, since there are multiple entries. Then you would get rid of the "[0]" after entries as well. — Loren
– Loren, Commented Mar 16, 2016 at 1:29
I would encourage you to post the code in a JSFiddle. It doesn't need to be all of the code. Often, the smallest example that demonstrates the issue is most useful. I'm confident you can get more help that way. — Loren
– Loren, Commented Mar 16, 2016 at 5:55
I need the rankingData[0] as I'm passing it an array filled with some amount of arrays in that json sample, but what if I want to order the whole thing by the sub ng-repeat — Olly
– Olly, Commented Mar 16, 2016 at 11:14
I know you've already accepted an answer and it sounds like you've restructured your data, but I think all you needed to do to get the sorting working the way you wanted it given your initial example was remove the allRankingData[0]. from your orderBy. — Lex
– Lex, Commented Mar 16, 2016 at 14:13
Is that taking into account that my data is an array of a collection of the array I posted above? I think I tried it but I can't be sure, as I think the reference is correct. Either way i'll bear that in mind if I have time to double check it! Thanks — Olly
– Olly, Commented Mar 16, 2016 at 17:22

Loren · Accepted Answer · 2016-03-16 01:47:49Z

2

Here is a working JSFiddle to help you with an example. Walk through the code and observe how orderBy is being used. Also, observe how a nesting can be done.

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

myApp.controller('myCtrl', function($scope) {

    $scope.people = [{
        "name": "Bob Jones",
        "scores": [
		{date:"01/10/2010",value:40},
		{date:"01/10/2014",value:41},
		{date:"01/10/2011",value:43},
		{date:"01/10/2014",value:49}
		]
    },{
        "name": "Adam Johnson",
        "scores": [
		{date:"01/10/2013",value:39},
		{date:"01/10/2015",value:31},
		{date:"01/10/2013",value:32},
		{date:"01/10/2011",value:21}]
    },{
        "name": "Mary Hills",
        "scores": [
		{date:"01/10/2014",value:92},
		{date:"01/10/2014",value:73},
		{date:"01/10/2013",value:89},
		{date:"01/10/2011",value:88}]
    }];


});

<div ng-controller='myCtrl'>
    <ul ng-repeat="person in people">
        <li>{{person.name}}</li>
        <ul ng-repeat="score in person.scores | orderBy:'date'">
            <li>{{score.date}}:{{score.value}}</li>
        </ul>
    </ul>
</div>

answered Mar 16, 2016 at 1:47

Loren

1902 silver badges14 bronze badges

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

5 Comments

Olly Over a year ago

Thanks for this answer, i'll try now - But what if I wanted to order the whole person in people list by date? Is that possible?

Olly Over a year ago

I ended up moving the internal ranking to the highest most level of the JSON, and then doing the orderBy your way. Thank you very much for your help, it was bugging me for quite a long time.

Olly Over a year ago

Also i'll be sure to post JSFiddles in the future, many thanks again :)

Loren Over a year ago

The documentation is helpful here AngularJS The only way that seems obvious to me to order the whole "person in people" by date (a property in an array of person) would be to use a function with orderBy. example:person in people | orderBy:myOrderFunction Then, in the function perform the comparison. Here is a JSFiddle to help showing sorting at person level by value using a function (will leave the date comparison to you).

Olly Over a year ago

This has made it a lot clearer! Thank you, I get what you've done, i'll try that as well :) Thanks

Narain Mittal · Accepted Answer · 2016-03-15 23:31:53Z

0

You can have a function for Ordering...

ng-repeat="rankingData in allRankingData | filter:query | orderBy:orderByFn"

And

$scope.orderByFn = function(item) {
   return item.entries[0].internalRanking;       
};

answered Mar 15, 2016 at 23:31

Narain Mittal

1,16011 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS : orderBy on array not working

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related