sorting json arrays in json array using angular js

Question

I have json array in the following format,

$scope.data =   [{
        "values" : [["2 Day", 103.89], ["NextDay", 107.41], ["Ground", 428.75]],
        "key" : "FedEx"
    }, {
        "values" : [["Ground", 117.8], ["NextDay", 10], ["2 Day", 15]],
        "key" : "UPS"
    }]

I need to sort it in to the following format :

$scope.data = [{
    "values" : [["2 Day", 103.89], ["NextDay", 107.41], ["Ground", 428.75]],
    "key" : "FedEx"
}, {
    "values" : [["2 Day", 15], ["NextDay", 10], ["Ground", 117.8]],
    "key" : "UPS"
}]

How can I do it using Angularjs?

A similar data set for which I want similar sorting to be applied, but here I have time (in long format) instead strings.

   $scope.data1 =   [{
                     "values" : [[1359072000000, 103.89], [1365116400000, 107.41], [1357516800000, 428.75]],
                     "key" : "FedEx"
                 }, {
                     "values" : [[1357516800000, 117.8], [1359072000000, 100], [1365116400000, 15]],
                     "key" : "UPS"
                 }];

To be formatted as

 $scope.data1 =   [{
                     "values" : [[1359072000000, 103.89], [1365116400000, 107.41], [1357516800000, 428.75]],
                     "key" : "FedEx"
                 }, {
                     "values" : [[1359072000000, 100],[1365116400000, 15], [1357516800000, 117.8],  ],
                     "key" : "UPS"
                 }];

Answer 1

Natural sorting can be applied in js like this. Natural sorting is required since strings in your array contains numbers.

function strcmp(a, b) {
    return a > b ? 1 : a < b ? -1 : 0;
}

function natcmp(a, b) {
    var x = [], y = [];

    a[0].replace(/(\d+)|(\D+)/g, function($0, $1, $2) { x.push([$1 || 0, $2]) })
    b[0].replace(/(\d+)|(\D+)/g, function($0, $1, $2) { y.push([$1 || 0, $2]) })

    while(x.length && y.length) {
        var xx = x.shift();
        var yy = y.shift();
        var nn = (yy[0]-xx[0]) || strcmp(yy[1],xx[1]);
        if(nn) return nn;
    }

    if(x.length) return -1;
    if(y.length) return +1;

    return 0;
}

Apply sorting in your array using javascript sort function as shown below.

$scope.data = $scope.data.map(function(d){ d.values = d.values.sort(natcmp); return d; });

Natural sorting is not needed for the second dataset. To sort the array in descending order by time, try this.

$scope.data1 = $scope.data1.map(function(d) {
    d.values = d.values.sort(function(a, b) {
        return new Date(b[0]) - new Date(a[0])
    });
    return d;
});

Answer 2

1. for displaying the array with some ng-repeat, you could use a filter https://docs.angularjs.org/api/ng/filter/filter There is orderBy filter but you can create your own filters.

2. for the data model to be sorted and not only for presentation, you could use the javascript sort function for arrays and give it a sorting implementation which compares 2 elements. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort