Javascript - Nested Array sorting doesn't work as expected

Question

The issue looks quite silly, but i am unable to find out what am i doing wrong.

I am trying to sort an Nested array based on a particular index. If i keep sorting the array, array keeps getting changed each time which shouldn't be the case. Moreover, this issue is not getting reproduced when the array length is bit small.

// Code goes here
var app = angular.module("myApp", []);

app.controller("someController", ['$scope', function($scope) {
  $scope.AppTitle = "Array sort Issue";

  $scope.testArray = [
    ["2016-04-10T18:30:00.000Z", "b20", 104],
    ["2016-04-10T18:30:00.000Z", "b20", 81],
    ["2016-04-10T18:30:00.000Z", "b20", 29],
    ["2016-04-10T18:30:00.000Z", "b20", 1],
    ["2016-04-10T18:30:00.000Z", "n0c", 155],
    ["2016-04-10T18:30:00.000Z", "n0c", 21],
    ["2016-04-10T18:30:00.000Z", "n0c", 12],
    ["2016-04-10T18:30:00.000Z", "n0c", 10],
    ["2016-04-10T18:30:00.000Z", "n0c", 8],
    ["2016-04-10T18:30:00.000Z", "n0c", 8],
    ["2016-04-10T18:30:00.000Z", "ecty", 101],
    ["2016-04-10T18:30:00.000Z", "ecty", 58],
    ["2016-04-10T18:30:00.000Z", "adgi", 127],
    ["2016-04-10T18:30:00.000Z", "adgi", 24],
    ["2016-04-10T18:30:00.000Z", "ath", 77],
    ["2016-04-10T18:30:00.000Z", "ath", 60],
    ["2016-04-10T18:30:00.000Z", "hry", 124],
    ["2016-04-10T18:30:00.000Z", "hry", 8],
    ["2016-04-10T18:30:00.000Z", "tfan", 132],
    ["2016-04-10T18:30:00.000Z", "sr", 96],
    ["2016-04-10T18:30:00.000Z", "hwdg", 59],
    ["2016-04-10T18:30:00.000Z", "hwdg", 15],
    ["2016-04-10T18:30:00.000Z", "hwdg", 14],
    ["2016-04-10T18:30:00.000Z", "hwdg", 6],
    ["2016-04-10T18:30:00.000Z", "alub", 88],
    ["2016-04-10T18:30:00.000Z", "ax0", 43],
    ["2016-04-10T18:30:00.000Z", "ax0", 40],
    ["2016-04-10T18:30:00.000Z", "ax0", 4],
    ["2016-04-10T18:30:00.000Z", "ax0", 1],
    ["2016-04-10T18:30:00.000Z", "voin", 67],
    ["2016-04-10T18:30:00.000Z", "voin", 19],
    ["2016-04-10T18:30:00.000Z", "voin", 2],
    ["2016-04-10T18:30:00.000Z", "p", 87],
    ["2016-04-10T18:30:00.000Z", "ttm", 65],
    ["2016-04-10T18:30:00.000Z", "ttm", 18],
    ["2016-04-10T18:30:00.000Z", "bre", 78],
    ["2016-04-10T18:30:00.000Z", "bre", 1],
    ["2016-04-10T18:30:00.000Z", "dew", 41],
    ["2016-04-10T18:30:00.000Z", "dew", 33],
    ["2016-04-10T18:30:00.000Z", "cgu", 19],
    ["2016-04-10T18:30:00.000Z", "cgu", 15],
    ["2016-04-10T18:30:00.000Z", "cgu", 13],
    ["2016-04-10T18:30:00.000Z", "cgu", 6],
    ["2016-04-10T18:30:00.000Z", "cgu", 4],
    ["2016-04-10T18:30:00.000Z", "cgu", 4],
    ["2016-04-10T18:30:00.000Z", "cgu", 3],
    ["2016-04-10T18:30:00.000Z", "cgu", 3],
    ["2016-04-10T18:30:00.000Z", "cgu", 1],
    ["2016-04-10T18:30:00.000Z", "cgu", 1],
    ["2016-04-10T18:30:00.000Z", "cgu", 1],
    ["2016-04-10T18:30:00.000Z", "an", 69],
    ["2016-04-10T18:30:00.000Z", "hwo", 69],
    ["2016-04-10T18:30:00.000Z", "camel", 68],
    ["2016-04-10T18:30:00.000Z", "mysore", 67],
    ["2016-04-10T18:30:00.000Z", "power", 60],
    ["2016-04-10T18:30:00.000Z", "power", 2],
    ["2016-04-10T18:30:00.000Z", "www", 49],
    ["2016-04-10T18:30:00.000Z", "www", 10],
    ["2016-04-10T18:30:00.000Z", "hgyp", 35],
    ["2016-04-10T18:30:00.000Z", "hgyp", null],
    ["2016-04-10T18:30:00.000Z", "hgyp", 4],
    ["2016-04-10T18:30:00.000Z", "igne", 43],
    ["2016-04-10T18:30:00.000Z", "igne", 13],
    ["2016-04-10T18:30:00.000Z", "weight", 54],
    ["2016-04-10T18:30:00.000Z", "hbk", 50]
  ]

  $scope.sortTable = function() {
    $scope.testArray.sort(function(a, b) {
      if (a[1] > b[1])
        return 1;
      if (b[1] > a[1])
        return -1;
      return 0;
    });
  }
}]);

Added the Code on plunker @ https://plnkr.co/edit/B99a28LBGLojcDtuBM2i

Scroll down and click the sortMe button. You can see the change in table rows on each button click.

Thanks in Advance. You would putting a stop to my misery ;)

if array is sorted already, why would sorting it again would give a different result ? — Sanjay
– Sanjay, Commented Jun 10, 2016 at 9:35
it is sorting a to z. but if you notice the last column, u can see a change. (power,60) and (power,2) rows keep getting interchanged every time the sort button is clicked — Sanjay
– Sanjay, Commented Jun 10, 2016 at 9:43

Nina Scholz · Accepted Answer · 2016-06-10 10:17:09Z

1

For a stable sort, you need another parameter, like the third element.

Sorting uses only parts of the data to check against, like your callback. If one check returns 0, because of the same content, the sort algorithm does not know, if a comes before b or reverse. I this case we need another property to decide in which range the result should coume out. For more and detailed infomation visit Wikipedia.

$scope.testArray.sort(function (a, b) {
    return a[1].localeCompare(b[1]) || a[2] - b[2];
});

edited Jun 10, 2016 at 10:17

answered Jun 10, 2016 at 9:49

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

2 Comments

Sanjay Over a year ago

Thanks for your solution. It fixes the problem. Could you expand on your answer why does it happen in the first place?

Redu Over a year ago

@Sanjay Your code do not care about the last item. The JS sort algo (in my case the V8) do not care about the sorting among the equal keys. I guess due to the inner working it takes the later found item to the front of the group with the same key value. So each time you press sort the one at the back moves to the front. In order to prevent this from happening you have to tell the sort function to take the last item into account as well. Just like Nina did in her coding. If a[1].localeCompare(b[1])returns 0 (compared a[1] items are the same) then go check the a[2] items.

Trung Le Nguyen Nhat · Accepted Answer · 2016-06-10 09:39:41Z

0

Your code on Plunker works fine, check again because I dont find anything change after clicking sortMe button

answered Jun 10, 2016 at 9:39

Trung Le Nguyen Nhat

6466 silver badges9 bronze badges

5 Comments

Sanjay Over a year ago

u can see a change. (power,60) and (power,2) rows keep getting interchanged every time the sort button is clicked

Holger Over a year ago

You are only sorting on element[1] i.e. "power", why do you think element[2] to be sorted or not to be interchanged?

Endre Simo Over a year ago

This should be a comment and not an answer!

Sanjay Over a year ago

@Holger Well, yes. i am sorting on element[1]. When i give an option for an user to sort based on any column. Clicking on the same column twice shouldn't render different tables. Basically if the table is already sorted, it doesn't make sense changing the results on sorting again.

Holger Over a year ago

Thats the behavior of the sort algorithmus. If the sortkey is ambiguous, the members of one key are totally random.

Collectives™ on Stack Overflow

Javascript - Nested Array sorting doesn't work as expected

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related