How to use unique value in custom filter using Angular JS?

Question

How to get unique value using Angular JS?

I want to get unique name with recent modified Date

here in this code Now I create a custom filter in my controller, that can iterate over the items in my ng-repeat and return only the items that meet certain criteria

This is my JS Code

var app = angular.module('app', []);
app.filter('lsnPlanLog', function() {
    return function(items) {
        var filtered = [];

        angular.forEach(items, function(el) {
          if(el.modifiedBy && el.modifiedOn) {
        el.meta.createdBy.name = el.meta.modifiedBy.name;
        el.meta.createdBy.id = el.meta.modifiedBy.id;
        el.createdOn = el.modifiedOn;
          }
        });

        for(var i = 1; i < items.length; ){
          if(items[i-1].meta.createdBy.id == items[i].meta.createdBy.id){
        items.splice(i, 1);
          } else {
              i++;
          }
        }
    return items;
  }
});

app.controller('ctrl',function($scope){

$scope.lsnPlanDailysLog = [
     {
     "id":"588f6347d991391aeae10c5b",
     "createdOn":"03-Feb-2017 12:59 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedOn":"03-Feb-2017 12:59 AM",
     "meta":{
        "id":"588f6347d991391aeae10c5b",
        "createdBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        },
        "modifiedBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        }
     }
      },
      {
     "id":"588f73b7d991391aeae10c5c",
     "createdOn":"03-Feb-2017 12:58 AM",
     "createdBy":"56b9e986b3cb1f000125c4d1",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"03-Feb-2017 12:58 AM",
     "meta":{
        "id":"588f73b7d991391aeae10c5c",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"588f7778d991391aeae10c5d",
     "createdOn":"04-Feb-2017 01:03 AM",
     "createdBy":"56b9e986b3cb1f000125c4d1",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"04-Feb-2017 01:03 AM",
     "meta":{
        "id":"588f7778d991391aeae10c5d",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"58938605d991390e8040cd4b",
     "createdOn":"03-Feb-2017 12:58 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"03-Feb-2017 12:58 AM",
     "meta":{
        "id":"58938605d991390e8040cd4b",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"5893861cd991390e8040cd4c",
     "createdOn":"03-Feb-2017 12:58 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"03-Feb-2017 12:58 AM",
     "meta":{
        "id":"5893861cd991390e8040cd4c",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"5893862ed991390e8040cd4d",
     "createdOn":"04-Feb-2017 01:00 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedOn":"04-Feb-2017 01:00 AM",
     "meta":{
        "createdBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        },
        "modifiedBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        }
     }
      },
      {
     "id":"5894dacdd991390e8040cd4e",
     "createdOn":"04-Feb-2017 01:02 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "meta":{
        "id":"5894dacdd991390e8040cd4e",
        "createdBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        }
     }
      }
]

})



<div ng-app="app" ng-controller="ctrl">
<table class="table table-condensed table-striped"" style="width: 100%;" ng-if="lsnPlanDailysLog!=undefined && lsnPlanDailysLog.length > 0">
    <thead>
        <tr>
            <th style="text-align: center;color: teal;width: 10%;">#</th>
            <th style="color: teal;width: 20%;text-align: center;">Type</th>
            <th style="color: teal;width: 20%;text-align: center;">Last updated by</th>
            <th style="color: teal;width: 20%;text-align: center;">Last updated date</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="eachLsnPlanDailyLog in lsnPlanDailysLog | orderBy:['-createdOn','-modifiedOn'] | lsnPlanLog">
            <td style="text-align: center;">{{$index+1}}</td>
            <td style="width: 20%;text-align: center;">LSN Plan Delivery</td>
            <td style="width: 20%;text-align: center;">{{eachLsnPlanDailyLog.meta.createdBy.name}}</td>
            <td style="width: 20%;text-align: center;">{{eachLsnPlanDailyLog.createdOn}}</td>
        </tr>
    </tbody>
</table>
</div>

This is my output for getting above code

#      Type             Last updated by     Last updated date

1   LSN Plan Delivery   Rahul Dravid            04-Feb-2017 01:03 AM

2   LSN Plan Delivery   Sachin Tendulakar   04-Feb-2017 01:02 AM

3   LSN Plan Delivery   Rahul Dravid            03-Feb-2017 12:58 AM

My expected output is below one

#      Type             Last updated by     Last updated date

1   LSN Plan Delivery   Rahul Dravid            04-Feb-2017 01:03 AM

2   LSN Plan Delivery   Sachin Tendulakar   04-Feb-2017 01:02 AM

score 0 · Answer 1 · answered Feb 01 '17 at 16:09

0

I think that first you need order by createdBy before compare:

 items[i-1].meta.createdBy.id == items[i].meta.createdBy.id

answered Feb 01 '17 at 16:09

Alexandre Nascimento

183
1
5
20

score 0 · Answer 2 · edited May 23 '17 at 12:33

First use orderBy to get the listing ordered by last modified time, like you're already doing, and then use some type of unique filter, such as this angular ui filter, or take a look at this question for some more ideas and functions for uniqueness. So, it might look something like this:

<table>
    <tbody>
        <tr ng-repeat="eachLsnPlanDailyLog in lsnPlanDailysLog | orderBy:['-createdOn','-modifiedOn'] | unique:'modifiedBy'">
             <!-- Your content -->
        </tr>
    </tbody>
</table>

How to use unique value in custom filter using Angular JS?

2 Answers2