boucle foreach dans angularjs

Je traversais l' forEach loopen AngularJS. Il y a quelques points que je n'ai pas compris à ce sujet.

1. A quoi sert la fonction itérateur? Y a-t-il moyen de s'en passer?
2. Quelle est la signification de la clé et de la valeur comme indiqué ci-dessous?

angular.forEach($scope.data, function(value, key){});

PS: J'ai essayé d'exécuter cette fonction sans les arguments et cela n'a pas fonctionné.

Voici mon json:

[
   {
     "Name": "Thomas",
     "Password": "thomasTheKing"
   },
   {
     "Name": "Linda",
     "Password": "lindatheQueen"
   }
]

Mon JavaScriptdossier:

var app = angular.module('testModule', []);

app.controller('testController', function($scope, $http){
   $http.get('Data/info.json').then(
      function(data){
         $scope.data = data;
      }
   );

   angular.forEach($scope.data, function(value, key){
      if(value.Password == "thomasTheKing")
         console.log("username is thomas");
   });
});

Une autre question : pourquoi la fonction ci-dessus n'entre pas sur if condition et imprime "username is thomas" dans la console?

Questions 1 et 2

Donc, fondamentalement, le premier paramètre est l'objet sur lequel itérer. Cela peut être un tableau ou un objet. S'il s'agit d'un objet comme celui-ci:

var values = {name: 'misko', gender: 'male'};

Angular prendra chaque valeur une par une, la première étant le nom, la seconde le sexe.

Si votre objet sur lequel itérer est un tableau (également possible), comme ceci:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]

Angular.forEach prendra un par un en commençant par le premier objet, puis le deuxième objet.

Pour chacun de ces objets, il va donc les prendre un par un et exécuter un code spécifique pour chaque valeur. Ce code est appelé la fonction itérateur . forEach est intelligent et se comporte différemment si vous utilisez un tableau d'une collection. Voici quelques exemples:

var obj = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(obj, function(value, key) {
  console.log(key + ': ' + value);
});
// it will log two iteration like this
// name: misko
// gender: male

La clé est donc la valeur de chaîne de votre clé et la valeur est ... la valeur. Vous pouvez utiliser la clé pour accéder à votre valeur comme ceci:obj['name'] = 'John'

Si cette fois vous affichez un tableau, comme ceci:

var values = [{ "Name" : "Thomas", "Password" : "thomasTheKing" },
           { "Name" : "Linda", "Password" : "lindatheQueen" }];
angular.forEach(values, function(value, key){
     console.log(key + ': ' + value);
});
// it will log two iteration like this
// 0: [object Object]
// 1: [object Object]

Alors la valeur est votre objet (collection) et la clé est l'index de votre tableau puisque:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}

J'espère que cela répondra à votre question. Voici un JSFiddle pour exécuter du code et tester si vous le souhaitez: http://jsfiddle.net/ygahqdge/

Déboguer votre code

Le problème semble venir du fait qu'il $http.get()s'agit d'une requête asynchrone.

Vous envoyez une requête sur votre fils, PUIS lorsque votre navigateur termine le téléchargement, il exécute le succès. MAIS juste après avoir envoyé votre demande, vous effectuez une boucle en utilisant angular.forEachsans attendre la réponse de votre JSON.

Vous devez inclure la boucle dans la fonction de réussite

var app = angular.module('testModule', [])
    .controller('testController', ['$scope', '$http', function($scope, $http){
    $http.get('Data/info.json').then(function(data){
         $scope.data = data;

         angular.forEach($scope.data, function(value, key){
         if(value.Password == "thomasTheKing")
           console.log("username is thomas");
         });
    });

});

Cela devrait fonctionner.

Aller plus profondément

L' API $ http est basée sur les API différées / promises exposées par le service $ q. Alors que pour les modèles d'utilisation simples, cela n'a pas beaucoup d'importance, pour une utilisation avancée, il est important de vous familiariser avec ces API et les garanties qu'elles offrent.

Vous pouvez jeter un œil aux API différées / promises , c'est un concept important d'Angular pour faire des actions asynchrones fluides.

vous devez utiliser des boucles angular.forEach imbriquées pour JSON comme indiqué ci-dessous:

 var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

    angular.forEach(values,function(value,key){
        angular.forEach(value,function(v1,k1){//this is nested angular.forEach loop
            console.log(k1+":"+v1);
        });
    });

Le angular.forEach()va parcourir votre jsonobjet.

Première itération,

clé = 0, valeur = {"nom": "Thomas", "mot de passe": "thomasTheKing"}

Deuxième itération,

clé = 1, valeur = {"nom": "Linda", "mot de passe": "lindatheQueen"}

Pour obtenir la valeur de votre name, vous pouvez utiliser value.nameou value["name"]. Même chose avec votre password, vous utilisez value.passwordou value["password"].

Le code ci-dessous vous donnera ce que vous voulez:

   angular.forEach(json, function (value, key)
         {
                //console.log(key);
                //console.log(value);
                if (value.password == "thomasTheKing") {
                    console.log("username is thomas");
                }
         });

Changez la ligne en ceci

 angular.forEach(values, function(value, key){
   console.log(key + ': ' + value);
 });

 angular.forEach(values, function(value, key){
   console.log(key + ': ' + value.Name);
 });

Dans Angular 7, la boucle for est comme ci-dessous

var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

for (let item of values)
{
}