Angularjs ng-repeat with some conditions:

Question

This is my json response i am storing this in

$scope.times = response.data;

My $scope.times json object:

[
  {
    "id": 1,
    "status": true,
    "time": "2018-03-05T10:24:15.000Z",
    "complaintId": 1
  },
  {
    "id": 2,
    "status": true,
    "time": null,
    "complaintId": 1
  },
  {
    "id": 3,
    "status": true,
    "time": "2018-03-05T10:53:14.000Z",
    "complaintId": 2
  },
  {
    "id": 6,
    "status": false,
    "time": "2018-03-05T11:58:45.000Z",
    "complaintId": 1
  },
  {
    "id": 7,
    "status": true,
    "time": "2018-03-05T12:11:53.000Z",
    "complaintId": 1
  },
  {
    "id": 8,
    "status": false,
    "time": "2018-03-05T13:23:13.000Z",
    "complaintId": 2
  },
  {
    "id": 9,
    "status": true,
    "time": "2018-03-05T08:17:18.000Z",
    "complaintId": 3
  },
  {
    "id": 10,
    "status": true,
    "time": "2018-03-05T12:32:08.000Z",
    "complaintId": 2
  }
]

I am displaying this in html using ng-repeat= 'time in times' , but i need to get json object of times with complaintId which located in last, for example there are many complaintId:1 in object.

i need to get only which have complaintId in last.

My expected output in time:

[
  {
    "id": 7,
    "status": true,
    "time": "2018-03-05T12:11:53.000Z",
    "complaintId": 1
  },
  {
    "id": 9,
    "status": true,
    "time": "2018-03-05T08:17:18.000Z",
    "complaintId": 3
  },
  {
    "id": 10,
    "status": true,
    "time": "2018-03-05T12:32:08.000Z",
    "complaintId": 2
  }
]

My ng-repeat looping code:

table
tr
  th S.no
  th Time
tr(ng-repeat='time in times')
  td {{$index + 1 }}
  td {{time.status}}

why not simply sort / filter / anything you like on the array directly? the display will update accordingly.. If you need to keep the original array, make a copy for display purpose — Kaddath, Mar 05 '18 at 13:30
@Kaddath i dont know how to sort? i dont need original array, can you please post some piece of code — Mohamed Sameer, Mar 05 '18 at 13:31
try changing `tr(ng-repeat='time in times')` to `tr(ng-repeat='time of times')` — messerbill, Mar 05 '18 at 13:32
@MohamedSameer you can see [the way to use filter function based on array elements properties here](https://stackoverflow.com/questions/2722159/javascript-how-to-filter-object-array-based-on-attributes); i don't have time to write your code since it's not that trivial, you have to detect IDs, compare date with last stored item for this ID, etc. See also `Array.map` function — Kaddath, Mar 05 '18 at 13:50
@MohamedSameer I got the solution, but I have `id` as 8 (not 10) for `"complaintId": 2`. Are you sure you have the right desired outcome in your question? — Aleksey Solovey, Mar 05 '18 at 14:08

score 1 · Accepted Answer · answered Mar 05 '18 at 14:04

(Don't judge, it's Monday)

Here is the best solution I could find. You can obviously improve it (make it shorter) by using some ES6 magic with .reduce / .filter / .forEach, etc.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="time in times">
<pre>{{time | json}}</pre>
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.times = [{"id":1,"status":true,"time":"2018-03-05T10:24:15.000Z","complaintId":1},{"id":2,"status":true,"time":null,"complaintId":1},{"id":3,"status":true,"time":"2018-03-05T10:53:14.000Z","complaintId":2},{"id":6,"status":false,"time":"2018-03-05T11:58:45.000Z","complaintId":1},{"id":7,"status":true,"time":"2018-03-05T12:11:53.000Z","complaintId":1},{"id":8,"status":false,"time":"2018-03-05T13:23:13.000Z","complaintId":2},{"id":9,"status":true,"time":"2018-03-05T08:17:18.000Z","complaintId":3},{"id":10,"status":true,"time":"2018-03-05T12:32:08.000Z","complaintId":2}];

var a = $scope.times;

var b = []; // collect complaintId
for(var i=0;i<a.length;i++){
 if(!b.includes(a[i].complaintId)){
     b.push(a[i].complaintId);
    }
}

var c = []; // collect duplicates per complaintId
for(var i=0;i<b.length;i++){
 var temp = []
 for(var j=0;j<a.length;j++){
     if(b[i] == a[j].complaintId){
         temp.push(a[j])
        }
    }
    c.push(temp)
}

// now it's safe to `reduce` the inner arrays (per complaintId)

var d = []; // .forEach .reduce
for(var i=0; i<c.length;i++){
    var temp = c[i][0].time;
    var temp2 = c[i][0];
    for(var j=1; j<c[i].length;j++){
        if(c[i][j].time){
            if(new Date(c[i][j].time).valueOf() > new Date(temp).valueOf()){
                temp = c[i][j].time;
                temp2 = c[i][j];
            }
        }
    }
    d.push(temp2)
}

$scope.times = d;

});

</script>

</body>
</html>

score 0 · Answer 2 · answered Mar 05 '18 at 14:27

You can use the Angular Filter module

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

And then filter out the duplicates using:

ng-repeat="time in times | unique: 'complaintId'"

angular.module('app', ['angular.filter'])

.controller('test', function($scope) {
  $scope.items = [
  {
    "id": 1,
    "status": true,
    "time": "2018-03-05T10:24:15.000Z",
    "complaintId": 1
  },
  {
    "id": 2,
    "status": true,
    "time": null,
    "complaintId": 1
  },
  {
    "id": 3,
    "status": true,
    "time": "2018-03-05T10:53:14.000Z",
    "complaintId": 2
  },
  {
    "id": 6,
    "status": false,
    "time": "2018-03-05T11:58:45.000Z",
    "complaintId": 1
  },
  {
    "id": 7,
    "status": true,
    "time": "2018-03-05T12:11:53.000Z",
    "complaintId": 1
  },
  {
    "id": 8,
    "status": false,
    "time": "2018-03-05T13:23:13.000Z",
    "complaintId": 2
  },
  {
    "id": 9,
    "status": true,
    "time": "2018-03-05T08:17:18.000Z",
    "complaintId": 3
  },
  {
    "id": 10,
    "status": true,
    "time": "2018-03-05T12:32:08.000Z",
    "complaintId": 2
  }
]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<div ng-app="app">
  <div ng-controller="test">
    <table>
      <tr ng-repeat="item in items | unique: 'complaintId'">
        <td>{{$index + 1}}</td>
        <td>{{item.status}}</td>
      </tr>
    </table>
  </div>
</div>

It's probaly better to write your own filter to sort and compare the dates and keep just the last record for each `complaintId` — Alvaro Flaño Larrondo, Mar 05 '18 at 14:39

score 0 · Answer 3 · answered Mar 05 '18 at 14:35

Try using loadash lib.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

 <div ng-repeat="c in times">
        {{c.complaintId}}  -  {{c.time}}
    </div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   
     $scope.times= [{
            "id": 1,
            "status": true,
            "time": "2018-03-05T10:24:15.000Z",
            "complaintId": 1
        },
        {
            "id": 3,
            "status": true,
            "time": "2018-03-05T10:53:14.000Z",
            "complaintId": 2
        },
        {
            "id": 6,
            "status": false,
            "time": "2018-03-05T11:58:45.000Z",
            "complaintId": 1
        },
        {
            "id": 7,
            "status": true,
            "time": "2018-03-05T12:11:53.000Z",
            "complaintId": 1
        },
        {
            "id": 8,
            "status": false,
            "time": "2018-03-05T13:23:13.000Z",
            "complaintId": 2
        },
        {
            "id": 9,
            "status": true,
            "time": "2018-03-05T08:17:18.000Z",
            "complaintId": 3
        },
        {
            "id": 10,
            "status": true,
            "time": "2018-03-05T12:32:08.000Z",
            "complaintId": 2
        }
    ];
    
   $scope.times = _.sortBy($scope.times,'time').reverse();
  $scope.times= _.uniqBy($scope.times, 'complaintId');
 // console.log($scope.times);
});
</script>

</body>
</html>

Angularjs ng-repeat with some conditions:

3 Answers3