Sort table by column header in AngularJS

Question

There is an array of objects from which I get data to put in the table:

$ctrl.myArray = [
            {name: "name1", id: 1, children: ["one", "two"]},
            {name: "name2", id: 2, children: ["two"]},
            {name: "name3", id: 3, children: ["one", "two"]},
            {name: "name4", id: 4, children: ["one"]}
];

Putting the data in the table is working fine, the problem comes when I want to add the sorting functionality by columns.

In controller's constructor I added this:

this.orderByField = 'name';
this.reverseSort = false;

firstly I tried to add the sorting functionality only for the name column and this is the code:

<thead>
    <tr>
      <th>
        <a href="#" ng-click="orderByField='name'; reverseSort = !reverseSort">
            Name <span ng-show="orderByField == 'name'"><span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span>
            </a>
      </th>
      <th>Id</th>
      <th>Children</th>
    </tr>
</thead>

<tbody>
    <tr ng-repeat="rows in $ctrl.myArray track by $index | orderBy:orderByField:reverseSort">
        <td>
            {{$ctrl.myArray[$index].name}}
        </td>
        <td>{{$ctrl.myArray[$index].id}}</td>
        <td><span ng-repeat="rows in $ctrl.myArray[$index].children track by $index">
            {{$ctrl.myArray[$parent.$index].children[$index]}}</span>
        </td>
    </tr>
</tbody>

This is the error message:

[orderBy:notarray] Expected array but received: 0

Don't know why the array is 0. Any ideas?

Possible duplicate of ng-repeat with track by and filter and orderBy not working — Ele
– Ele, Commented Mar 22, 2018 at 15:01
try different order: ng-repeat="rows in $ctrl.myArray | orderBy:orderByField:reverseSort track by $index" — Aleksey Solovey
– Aleksey Solovey, Commented Mar 22, 2018 at 15:07
@AlekseySolovey I tried like that but only the arrow of the header is changing, when I click on it, it changes from ^ to v but the data below remains the same. I saw this approach here but doesn't solve my problem yet — dadsa
– dadsa, Commented Mar 22, 2018 at 15:12
@dadsa the problem is in the way you display the data, it doesn't order the original array, it creates a new one. Instead of {{$ctrl.myArray[$index].name}} use {{rows.name}}, etc. — Aleksey Solovey
– Aleksey Solovey, Commented Mar 22, 2018 at 15:22

Surjeet Bhadauriya · Accepted Answer · 2018-03-22 15:19:38Z

1

So, the issue is related to track by $index. You have misplaced it.

I have made the plunker for it. Below is the link:

https://plnkr.co/edit/mqA1ofIRUAxal8d8tCr0?p=preview

answered Mar 22, 2018 at 15:19

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

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

4 Comments

Aleksey Solovey Over a year ago

OP uses ControllerAs syntax

Surjeet Bhadauriya Over a year ago

@AlekseySolovey, So that is not the issue. I just gave him a solution. And that is understandable.

dadsa Over a year ago

@SurjeetBhadauriya, your solution does the right result but it didn't solve my problem. As @AleksetySolovey said in the comment, the solution to my particular problem was instead of using {{$ctrl.myArray[$index].name}} to use {{rows.name}}

Surjeet Bhadauriya Over a year ago

Yes use $ctrl.myArray but don't use $index to display value. Please read ng-repeat from the official site for more clear idea. You are using it in the wrong way.

Collectives™ on Stack Overflow

Sort table by column header in AngularJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related