AngularJS orderby with array of arrays and separate keys

Question

I have tabular data that I'm returning from the server in the form of an array of arrays for the data, and an array of keys associated with that data. Then, I want to sort by a particular key. Now, I know I can pre-process the data and zip together an array of objects, but say I don't want to do that. Is there an easy, built-in way to do this?

Some code that doesn't actually sort but does display the data. CodePen.

JS:

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

app.controller('TestController', function() {
  this.headers = ['foo', 'bar'];
  this.data = [
    [ 'lol', 'wut' ],
    [ '123', 'abc' ]
  ];

  this.predicate = '';
});

HTML:

<table ng-app="helloworld" ng-controller="TestController as test">
  <thead>
    <tr>
      <th ng-repeat="heading in test.headers" ng-click="test.predicate = heading">{{ heading }}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Predicate:</td>
      <td>{{ test.predicate }}</td>
    </tr>
    <tr ng-repeat="row in test.data | orderBy: test.predicate">
      <td ng-repeat="column in row">{{ column }}</td>
    </tr>
  </tbody>
</table>

orderBy takes a property and sorts in a direction. There is no property "predicate" in the array. Are you trying to filter? — Antiga
– Antiga, Commented Oct 17, 2014 at 1:07
@Antiga, I realize that, which is why I specified that the code doesn't actually do anything. It works if I pre-generate an array of objects, but I was wondering if there was a clever way to avoid having to do that. — Radu
– Radu, Commented Oct 17, 2014 at 1:09
I think I understand what you're saying now. I would personally use something like Lo-Dash's zipObject (lodash.com/docs#zipObject) but I understand that you don't want to do that. Hope you find the solution you're looking for. — Antiga
– Antiga, Commented Oct 17, 2014 at 1:14
Thanks @Antiga, I suspect that there is no way around it, but I'm pretty new to Angular.. — Radu
– Radu, Commented Oct 17, 2014 at 1:21

Angad · Accepted Answer · 2014-10-17 02:13:00Z

2

You can accomplish this but I would suggest that you instead have your server return you data as a list of json objects.

To sort your multidimensional array you basically sort by the inner array's index. Your predicate would hold the index of the column you want to sort on (either 0 or 1 in your case)

<th ng-repeat="heading in test.headers" 
    ng-click="test.predicate = $index">
            {{ heading }}
</th>

Create a sorting function in your controller as below:

 this.sorter = function(item){
    return item[test.predicate];
  }

Apply this sorter as your orderBy expression as below:

<tr ng-repeat="row in data | orderBy: test.sorter">

I've forked and updated your CodePen for you: http://codepen.io/anon/pen/qvcKD

edited Oct 17, 2014 at 2:13

answered Oct 17, 2014 at 2:04

Angad

3,4293 gold badges33 silver badges40 bronze badges

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

1 Comment

Radu Over a year ago

Exactly what I was looking for, thank you! The reason I'm not returning it from the server is because the list of items is large enough that it makes a big difference in the amount of data being sent per request. Having said that.. I should see if compression takes care of that.

Radu · Accepted Answer · 2014-10-17 01:50:26Z

0

For reference, the solution where the array is zipped together with standard JS:

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

app.controller('TestController', function() {
  this.headers = ['foo', 'bar'];
  var data = [
    [ 'lol', 'abc' ],
    [ '123', 'wut' ]
  ];

  this.data = [];

  for (var i = 0, n = data.length; i < n; i++) {
    this.data.push({});
    for (var j = 0, m = this.headers.length; j < m; j++) {
      this.data[i][this.headers[j]] = data[i][j];
    }
  }

  this.predicate = '';
});

Or instead with LoDash as suggested by @Antiga:

_.each(data, function(item) {
  this.data.push(_.zipObject(this.headers, item));
}, this);

answered Oct 17, 2014 at 1:50

Radu

8,7098 gold badges58 silver badges94 bronze badges

Collectives™ on Stack Overflow

AngularJS orderby with array of arrays and separate keys

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related