boucle foreach dans angularjs

Je traversais la loop forEach à AngularJS . Il y a peu de points que je n’ai pas compris à ce sujet.

  1. A quoi sert la fonction iterator? 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"); }); }); 

Une autre question : pourquoi la fonction ci-dessus n’entre pas si condition et impression “nom d’utilisateur est thomas” dans la console?

Questions 1 et 2

Donc, fondamentalement, le premier paramètre est l’object à itérer. Cela peut être un tableau ou un object. Si c’est un object comme ceci:

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

Angular prendra chaque valeur une par une, la première étant name, la seconde étant gender.

Si votre object à itérer est un tableau (également possible), comme ceci:

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

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

Pour chacun de ces objects, il faudra donc les exécuter un par un et exécuter un code spécifique pour chaque valeur. Ce code s’appelle la fonction iterator . forEach est intelligent et se comporte différemment si vous utilisez un tableau d’une collection. Voici un exemple:

 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] 

Donc, la valeur est votre object (collection), et la clé est l’index de votre tableau depuis:

 [{ "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, ALORS lorsque votre navigateur le télécharge, il exécute avec succès. MAIS juste après l’envoi de votre demande, effectuez une boucle en utilisant angular.forEach sans 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. Pour les modèles d’utilisation simples, peu importe, 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 aux API de diffusion / promesse , c’est un concept important d’Angular pour effectuer des actions asynchrones en douceur.

vous devez utiliser des boucles angular.forEach nestedes 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); }); }); 

angular.forEach() va parcourir votre object json .

Première itération,

key = 0, value = {“name”: “Thomas”, “password”: “thomasTheKing”}

Deuxième itération,

key = 1, value = {“name”: “Linda”, “password”: “lindatheQueen”}

Pour obtenir la valeur de votre name , vous pouvez utiliser value.name ou value["name"] . Identique à 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"); } }); 

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