All geek questions in one place

Angularjs ng-repeat with some conditions:

This is my json answer. I keep it 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 show this in html using ng-repeat = 'time in times' , but I need to get the json object once with the complaint that is in the last, for example, there are a lot of complaintsId: 1 in the object.

I need to get only those who have a complaint in the latter.

My expected result 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
  }
]

Ng-repeat loop code:

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

(Don’t judge, it's Monday)

Here is the best solution I could find. Obviously, you can improve it (make it shorter) using ES6 magic with .reduce/ .filter/ .forEachetc.

<!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 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>
Hide result
+1

Angular

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

, :

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>
Hide result
0

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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1694475/

More articles:


All Articles