web-dev-qa-db-fra.com

boucle foreach dans angularjs

Je parcourais la forEachloop dans AngularJS. Il y a quelques points que je n'ai pas compris à ce sujet.

  1. Quelle est l'utilisation de la fonction itérateur? Y a-t-il un 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 fichier JavaScript:

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");
   });
});

ne autre question: Pourquoi la fonction ci-dessus n'entre pas sur si condition et affiche "username is thomas" dans la console?

angularjsforeach
102
Pragam Shrivastava

Questions 1 et 2

Donc, fondamentalement, le premier paramètre est l'objet sur lequel itérer. Ce peut être un tableau ou un objet. Si c'est un objet comme celui-ci:

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

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

Si votre objet à 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 cet objet, il les prendra donc un par un et exécutera un code spécifique pour chaque valeur. Ce code s'appelle 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

Donc, clé est 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]

La valeur est donc votre objet (collection), et key 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épond à votre question. Voici un JSFiddle pour exécuter du code et tester si vous voulez: http://jsfiddle.net/ygahqdge/

Déboguer votre code

Le problème semble provenir du fait que $http.get() est une requête asynchrone.

Vous envoyez une requête sur votre fils, PUIS lorsque votre navigateur finit de le télécharger, il s'exécute avec succès. MAIS juste après l'envoi de votre demande, vous effectuez une boucle avec angular.forEach sans attendre la réponse de votre code 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 marcher.

Aller plus loin

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

Vous pouvez jeter un coup d'œil à API différées/promises , il s'agit d'un concept important de Angular permettant de réaliser des actions asynchrones régulières.

200
sebastienbarbier

vous devez utiliser des boucles imbriquées angular.forEach 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);
        });
    });
7
Cherry

La angular.forEach() parcourra votre objet json.

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.name ou value["name"]. De même avec votre password, vous utilisez value.password ou 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");
                }
         });
5
nrs

Changer la ligne dans cette

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

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

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)
{
}
1
sajadre