угловые элементы приращения в корме json

Question

У меня есть список учеников и независимо от того, присутствовали они или отсутствовали в классе.

var studentList = [ 
    {id: '111', name: 'Anna', present: '1'}, 
    {id: '222', name: 'Bob', present: '1'}, 
    {id: '333', name: 'Cath', present: '1'}, 
    {id: '111', name: 'Anna', present: '0'}, 
    {id: '222', name: 'Bob', present: '0'}, 
    {id: '333', name: 'Cath', present: '1'} 
]; 

Я хочу вывести некоторый html, который производит ниже результат.

<ul> 
    <li>Cath || 2</li> 
    <li>Anna || 1</li> 
    <li>Bob || 1</li>  
</ul> 

То, что я хочу сделать, это Еогеасп граф идентификатор, если студент присутствует или отсутствует, то предоставить в общей сложности в нижней части страницы.

Это то, что у меня есть до сих пор.

<div ng-controller="MainController"> 
    <ul> 
     <li ng-repeat="student in students">{{ student.name }} ||{{student.present}}<li> 
    </ul> 
</div> 

<script> 
angular.module('app',[]) 
.controller('MainController', function($scope) { 
    var studentList = [ 
    {id: '111', name: 'Anna', present: '1'}, 
    {id: '222', name: 'Bob', present: '1'}, 
    {id: '333', name: 'Cath', present: '1'}, 
    {id: '111', name: 'Anna', present: '0'}, 
    {id: '222', name: 'Bob', present: '0'}, 
    {id: '333', name: 'Cath', present: '1'} 
    ]; 
    $scope.students = studentList; 
    var presntTotal = 0; 
    $scope.students.forEach(function(item) { 
     presntTotal += parseInt(item.present,10); 
    }); 
    $scope.presntTotal = presntTotal; 
    console.log(presntTotal); //outputs 4 
}); 
</script> 

Как я могу идти о получении presentTotal для каждого студента, так что я могу показать его, как я показал выше? see codepen demo

Answer 1

Есть (как всегда) больше способов сделать это, в прикрепленном фрагменте я подготовил массив в JS-коде, который будет отображаться непосредственно. Но вы могли бы оставить массив как есть и использовать Angular's filters в HTML-формате в ng-repeat (могут понадобиться какие-то фильтры).

angular.module('app', []) 
 
    .controller('MainController', function($scope) { 
 
    var studentList = [{ 
 
     id: '111', 
 
     name: 'Anna', 
 
     present: '1' 
 
    }, { 
 
     id: '222', 
 
     name: 'Bob', 
 
     present: '1' 
 
    }, { 
 
     id: '333', 
 
     name: 'Cath', 
 
     present: '1' 
 
    }, { 
 
     id: '111', 
 
     name: 'Anna', 
 
     present: '0' 
 
    }, { 
 
     id: '222', 
 
     name: 'Bob', 
 
     present: '0' 
 
    }, { 
 
     id: '333', 
 
     name: 'Cath', 
 
     present: '1' 
 
    }]; 
 

 
    console.log('studentList', studentList); 
 

 

 

 
    $scope.studentListReduced = studentList.reduce(function(previousValue, currentValue) { 
 
     var found = false; 
 

 
     previousValue.forEach(function(item) { 
 
     if (item.name == currentValue.name) { 
 
      item.present = parseInt(item.present, 10); 
 
      item.present += parseInt(currentValue.present, 10); 
 
      found = true; 
 
     } 
 
     }); 
 

 
     if (!found) { 
 
     previousValue.push(currentValue); 
 
     } 
 

 
     return previousValue; 
 
    }, []); 
 

 
    console.log('$scope.studentListReduced', $scope.studentListReduced); 
 

 
    $scope.total = $scope.studentListReduced.reduce(function(previousValue, currentValue) { 
 
     return previousValue + currentValue.present; 
 
    }, 0); 
 

 
    console.log('$scope.total', $scope.total); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainController"> 
 
    <ul> 
 
     <li ng-repeat="student in studentListReduced ">{{ student.name }} || {{student.present}}</li> 
 
    </ul> 
 
    {{total}} 
 
    </div> 
 
</div>

Answer 2

Попробуйте

angular.module('app',[]) 
 
.controller('MainController', function($scope) { 
 
    var studentList = [ 
 
    {id: '111', name: 'Anna', present: 1}, 
 
    {id: '222', name: 'Bob', present: 1}, 
 
    {id: '333', name: 'Cath', present: 1}, 
 
    {id: '111', name: 'Anna', present: 0}, 
 
    {id: '222', name: 'Bob', present: 0}, 
 
    {id: '333', name: 'Cath', present: 1} 
 
    ]; 
 
    $scope.students = studentList; 
 
    var students = {} 
 
    var stu_count = {} 
 
    var presentData = [] 
 
    studentList.forEach(
 
     function(e){ 
 
      if(!students[e.name]){ 
 
       students[e.name] = 0 
 
       stu_count[e.name] = 0 
 
      } 
 
      students[e.name] += e.present 
 
      stu_count[e.name]++ 
 
     } 
 
    ); 
 
    for(var name in students){ 
 
     presentData.push({name : name, present : stu_count[name]}) 
 
    } 
 
    $scope.presntTotal = presentData; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="MainController"> 
 
    <ul> 
 
     <li ng-repeat="student in presntTotal ">{{ student.name }} || {{student.present}}</li> 
 
    </ul> 
 
    </div> 
 
</div>