Je travaille avec angulaire et je dois pouvoir afficher une longueur de tableau sans utiliser ng-repeat.
Voici le scénario:
J'ai default.json:
{
{ ...
"data":
[{
"name":"Test",
"errors":
[
{"id": 1,"level": 2,"details": {...}},
{"id": 3,"level": 1},
{"id": 5,"level": 1},
{"id": 5,"level": 1},
....
],
},
{
"name":"Test",
"errors":
[
{"id": 1,"level": 2,"details": {...}},
{"id": 5,"level": 1},
....
],
}
],
....
}
}
Alors j'ai créé myData à partir du contrôleur, afin que je puisse faire quelque chose comme ng-repeat="data in myData" et que je puisse l'utiliser correctement.
Maintenant, voici la question:
J'ai besoin d'avoir un récapitulatif de toutes les erreurs, une somme de toutes les erreurs dans les objets.
J'ai essayé de faire quelque chose comme ça:
<span ng-repeat="data in myData">
<i ng-repeat="error in data.errors">{{error.length}}</i>
</span>
Et rien n'a été imprimé. J'ai donc essayé:
<span ng-repeat="data in myData">
<i>{{data.errors.length}}</i>
</span>
Et le résultat a été:
4 2 0 0 0 0 0
Et cela a du sens, car mon premier objet a 4 erreurs, mon second 2 et ainsi de suite ...
Mais ce que j'aimerais voir, c'est seulement: 6 , car il y a 6 erreurs au total.
Comment puis-je obtenir une seule valeur qui résume toutes les erreurs de tous les objets que j'ai sans avoir à utiliser ng-repeat (je pense que je n'en ai pas besoin là)
J'espère que cette question est suffisamment claire, merci pour votre aide.
3 réponses
Une solution possible consiste à utiliser réduire , vous pouvez donc utiliser la réduction comme ceci
var result = array.reduce((prev, curr) => prev + curr);
Si le tableau est [4,2,0] le result ce sera 6
Donc une solution possible sera sur le balisage appeler une fonction de portée
{{arraySum(data.errors.length)}}
Et la fonction sera
$scope.arraySum= function(array) {
return array.reduce((prev, curr) => prev + curr);
}
MODIFIER pour cette modification, nous utiliserons la fonction carte
Balisage
{{totalErrors()}}
Code
$scope.totalErrors = function(){
if ($scope.myData)
return $scope.myData.data.map(function(o){ return o.errors.length})
.reduce((prev,curr) => {return prev + curr})
}
J'ai créé un plongeur à partir de ce que je comprends de vos données, vous pouvez le voir fonctionner ici
Ici est un plunker qui simule le retard d'une demande ajax en utilisant $ timeout. Il utilise ng-cloak sur le balisage pour empêcher l'affichage des données brutes.
Vous devez faire de cette façon dans votre contrôleur
var sum=0;
for(var i=0;i<$scope.MyData.length;i++)
{
var error=[];
error=$scope.MyData[i].errors;
sum=sum+error.length;
}
alert(sum+'');
Utiliser ce code dans le contrôleur (mis à jour pour la promesse)
function countErrors(myData) {
$scope.totalErrors = myData
.map(function(data) {
return data.errors.length; })
.reduce(function(acc, errorsLenght){
return acc += errorsLenght }, 0)
}
$scope.myData.$promise.then(countErrors)