AngularJS Sorting of array nested in JSON

Question

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?

not sure that orderBy will work without being able to pass it an object property name. Does code work without orderBy? Probably have to create custom filter for ordering — charlietfl
– charlietfl, Commented Jan 26, 2016 at 19:16
The data displays correctly in the table, but is not sorted. — victorkhugo
– victorkhugo, Commented Jan 26, 2016 at 19:20

tanenbring · Accepted Answer · 2016-01-26 20:28:45Z

2

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];
         });
    };
}]);

edited Jan 26, 2016 at 20:28

answered Jan 26, 2016 at 19:21

tanenbring

7804 silver badges14 bronze badges

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

2 Comments

victorkhugo Over a year ago

I'm sorry for the newb question, but where do I put this function? I tried right after my $scope.getRequest = function () { and it says, (intermediate value)(intermediate value).filter is not a function

tanenbring Over a year ago

You need to register it with your angular app. I updated the answer.

Judah Gabriel Himango · Accepted Answer · 2016-01-26 22:02:23Z

0

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'">

edited Jan 26, 2016 at 22:02

answered Jan 26, 2016 at 19:30

Judah Gabriel Himango

60.2k39 gold badges162 silver badges217 bronze badges

1 Comment

victorkhugo Over a year ago

This worked. I put it right after my $http.get statement I changed the first two lines to : .then(function(response) { $scope.myWelcome = response.data.data.map(function(input) {

Collectives™ on Stack Overflow

AngularJS Sorting of array nested in JSON

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related