Filter to sort in angular js for JSON data

Question

I am new to angular js and have basic understanding of how filters work in angular js.I am stuck to sort my jSON data array as there are various parameters on which it has to get sorted.

My JSON array is in this format:

[
  {
     type:0,
     emp_name:"xyz",
     connected_on:"9876543210"
  },
  {
     type:1,
     emp_name:"",
     connected_on:"9876543210"
  },
  {
     type:1,
     emp_name:"abcd",
     connected_on:"9876543210"
  },
  {
     type:0,
     emp_name:"pqr",
     connected_on:"9876543210"
  }
]

Other combination of the same array can be:

[
  {
     type:0,
     emp_name:"",
     connected_on:"9876543210"
  },
  {
     type:1,
     emp_name:"xyz",
     connected_on:"9876543210"
  },
  {
     type:0,
     emp_name:"abcd",
     connected_on:"9876543210"
  }
]

Every array will have any one object where type:1 , will be there and after sorting it has to be the first element always.

After that,the sorted array should have all those elements whose emp_name:"" is there.

At last of the sorted array it should contain all the remaining elements sorted according to emp_name:"whatever names"

So the results should look something like this below:

[
  {
     type:1,
     emp_name:"xyz",
     connected_on:"9876543210"
  },
  {
     type:0,
     emp_name:"",
     connected_on:"9876543210"
  },
  {
     type:0,
     emp_name:"abcd",
     connected_on:"9876543210"
  }
]

Can anyone help me to write the filter to get the desired result.Thanks in advance.If any other info required please let me know.

Also connected_on is unique value so i am using track by JSONarr.connected_on

Lodash has a function for this: lodash.com/docs#orderBy if you would consider ordering the array on load — Rian O'Dwyer
– Rian O'Dwyer, Commented Jun 28, 2016 at 12:21

Rajesh Dixit · Accepted Answer · 2016-06-28 12:29:21Z

2

Sort function expect -1, 0, -1 as result. -1 means before, 0 means no change and 1 means later.

Now you have to sort based on 2 parameters, so its better to have an arithmetic value. Have higher value based on priority. So in following situation, we have to sort first based on type and then based on emp_name.

To sort ascending, return 1 for greater and -1 for smaller. For descending reverse the values. Now combining this for both keys you will get something like this:

var data=[{type:0,emp_name:"xyz",connected_on:"9876543210"},{type:1,emp_name:"",connected_on:"9876543210"},{type:1,emp_name:"abcd",connected_on:"9876543210"},{type:0,emp_name:"pqr",connected_on:"9876543210"}];

data.sort(function(a, b) {
  var _a = a.type > b.type ? -10 : a.type < b.type ? 10 : 0;
  var _b = a.emp_name > b.emp_name ? 1 : a.emp_name < b.emp_name ? -1 : 0;
  return _a + _b;
});
console.log(data)

answered Jun 28, 2016 at 12:29

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

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

2 Comments

Pratswinz Over a year ago

thanks,it worked like charm,i missed the trick to take it -10

Rajesh Dixit Over a year ago

Glad, was able to help you. :-)

Pang · Accepted Answer · 2017-07-07 00:44:21Z

0

Suppose your array name emplist. You can search anything here. You will get the desired result. Use table for searching the data.

<input type="text" ng-model="search">
  <table>
    <th>type</th>
    <th>Emp name</th>
    <th>connected on</th>
    <tr ng-repeat="item in emplist|filter:search">
       <td>{{item.type}}<td>
       <td>{{item.emp_name}}<td>
       <td>{{item.connected_on}}<td>
    </tr>
 </table>

edited Jul 7, 2017 at 0:44

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jun 28, 2016 at 12:25

SrinivasAppQube

3011 gold badge5 silver badges22 bronze badges

1 Comment

Pratswinz Over a year ago

I dont have to search , i just need to order the elements while displaying using filter created in my controller.

Collectives™ on Stack Overflow

Filter to sort in angular js for JSON data

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