CODEWITHSUNDEEP
javascriptangularjs
victorkhugo
victorkhugo

Reputation: 3

AngularJS Sorting of array nested in JSON

GOAL : Setup a table that is sortable after data is returned from our server.

Data Format Returned from server : 

{
    "result" : {
        "code" : "OK",
        "msg" : ""
    },
    "data" : [{
            "row" : ["Fred", "64233", "197"]
        }, {
            "row" : ["Steve", "158879", "36"]
        }, {
            "row" : ["Ted", "115222", "12"]
        }
    ]
}

Limitation : Can't change the data format the server returns. The data that I want sortable is contained in the array in the "row" object. I tried doing things like 

<tr ng-repeat="roll in myWelcome.data" | orderBy:'roll.row[1]'">
   <td>{{ roll.row[0] }}</td><td>{{ roll.row[1] }}</td><td>{{ roll.row[2] }}</td>
</tr>

but it didn't work. Any ideas?

Upvotes: 0

Views: 91

Answers (2)

Judah Gabriel Himango
Judah Gabriel Himango

Reputation: 60001

I'd suggest transforming your data into something a little more standard. It will enable you to better maintain and reason about the code.

Since you can't change the format of the data the server sends you, you can just change it once it arrives on the client.

fetchData(results) {
   // Transform the results we get back from the server.
   this.myWelcomeData = results.data.map(function(input) {
      return {
         name: input.row[0],
         id: input.row[1],
         age: input.row[2]
      }
   });
}

Then you can order using the normal Angular repeater syntax:

<tr ng-repeat="roll in myWelcomeData" | orderBy:'id'">

Upvotes: 0

tanenbring
tanenbring

Reputation: 780

I would recommend organizing your data when it's returned from the server to make it more usable. Failing that, you could simply implement a custom filter that knows where to look.

<tr ng-repeat="roll in myWelcome.data | customOrderBy:1">

Filter:

angular.module("Your_App").filter("customOrderBy", [function() {
    return function(data, index) {
         return data.sort(function(o) {
             return o.row[index];
         });
    };
}]);

Upvotes: 2

Related Questions