I was going through the forEach
loop
in AngularJS
. There are few points that I did not understood about it.
angular.forEach($scope.data, function(value, key){});
PS: I tried to run this function without the arguments and it did not work.
Here's my json
:
[ { "Name": "Thomas", "Password": "thomasTheKing" }, { "Name": "Linda", "Password": "lindatheQueen" } ]
My JavaScript
file:
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"); }); });
Another question: Why the function above does not enter on if condition and print "username is thomas" in the console?
forEach() Function in AngularJS is used to iterate through each item in an array or object. It works similar to the for loop and this loop contains all properties of an object in key-value pairs of an object. Syntax: angular.forEach(object, iterator, [context])
C# provides an easy to use and more readable alternative to for loop, the foreach loop when working with arrays and collections to iterate through the items of arrays/collections. The foreach loop iterates through each item, hence called foreach loop.
The forEach method is also used to loop through arrays, but it uses a function differently than the classic "for loop". The forEach method passes a callback function for each element of an array together with the following parameters: Current Value (required) - The value of the current array element.
The forEach() method calls a function for each element in an array. The forEach() method is not executed for empty elements.
So basically, first parameter is the object to iterate on. It can be an array or an object. If it is an object like this :
var values = {name: 'misko', gender: 'male'};
Angular will take each value one by one the first one is name, the second is gender.
If your object to iterate on is an array (also possible), like this :
[{ "Name" : "Thomas", "Password" : "thomasTheKing" }, { "Name" : "Linda", "Password" : "lindatheQueen" }]
Angular.forEach will take one by one starting by the first object, then the second object.
For each of this object, it will so take them one by one and execute a specific code for each value. This code is called the iterator function. forEach is smart and behave differently if you are using an array of a collection. Here is some 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
So key is the string value of your key and value is ... the value. You can use the key to access your value like this : obj['name'] = 'John'
If this time you display an array, like this :
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]
So then value is your object (collection), and key is the index of your array since :
[{ "Name" : "Thomas", "Password" : "thomasTheKing" }, { "Name" : "Linda", "Password" : "lindatheQueen" }] // is equal to {0: { "Name" : "Thomas", "Password" : "thomasTheKing" }, 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}
I hope it answer your question. Here is a JSFiddle to run some code and test if you want : http://jsfiddle.net/ygahqdge/
The problem seems to come from the fact $http.get()
is an asynchronous request.
You send a query on your son, THEN when you browser end downloading it it execute success. BUT just after sending your request your perform a loop using angular.forEach
without waiting the answer of your JSON.
You need to include the loop in the success function
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"); }); }); });
This should work.
The $http API is based on the deferred/promise APIs exposed by the $q service. While for simple usage patterns this doesn't matter much, for advanced usage it is important to familiarize yourself with these APIs and the guarantees they provide.
You can give a look at deferred/promise APIs, it is an important concept of Angular to make smooth asynchronous actions.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With