Przechodziłem przez forEach
pętlę
w AngularJS
. Jest kilka punktów, których nie rozumiałem.
angular.forEach($scope.data, function(value, key){});
PS: Próbowałem uruchomić tę funkcję bez argumentów i nie zadziałało.
Tutaj'jest mój json
:
[
{
"Name": "Thomas",
"Password": "thomasTheKing"
},
{
"Name": "Linda",
"Password": "lindatheQueen"
}
]
Mój plik 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");
});
});
Inne pytanie: Dlaczego powyższa funkcja nie wchodzi na warunek if i drukuje "username is thomas" w konsoli?
Więc w zasadzie pierwszym parametrem jest obiekt do iteracji na. Może to być tablica lub obiekt. Jeśli jest to obiekt taki jak ten :
var values = {name: 'misko', gender: 'male'};
Angular pobierze każdą wartość po kolei pierwsza to imię, druga to płeć.
Jeśli twój obiekt do iteracji na jest tablicą (również możliwe), jak to :
[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
{ "Name" : "Linda", "Password" : "lindatheQueen" }]
Angular.forEach będzie pobierał jeden po drugim zaczynając od pierwszego obiektu, następnie drugi obiekt.
Dla każdego z tych obiektów, będzie więc brać je jeden po drugim i wykonywać określony kod dla każdej wartości. Ten kod jest nazywany funkcją iteratora. forEach jest inteligentny i zachowuje się inaczej, jeśli używasz tablicy lub kolekcji. Oto kilka przykładów:
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
Więc klucz jest wartością łańcuchową twojego klucza, a wartość jest ... wartością. Możesz użyć klucza, aby uzyskać dostęp do swojej wartości w ten sposób: obj['name'] = 'John'
.
Jeśli tym razem wyświetlisz tablicę, jak to :
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]
Więc wtedy wartość jest twoim obiektem (kolekcją), a klucz jest indeksem twojej tablicy, ponieważ :
[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
{ "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
1: { "Name" : "Linda", "Password" : "lindatheQueen" }}
Mam nadzieję, że to odpowiedź na twoje pytanie. Oto JSFiddle, aby uruchomić trochę kodu i przetestować, jeśli chcesz:
Problem wydaje się pochodzić z faktu, że $http.get()
jest żądaniem asynchronicznym.
Wysyłasz zapytanie do swojego syna, THEN kiedy przeglądarka kończy pobieranie, wykonuje success. ALE zaraz po wysłaniu żądania wykonujesz pętlę używając angular.forEach
bez czekania na odpowiedź JSON.
Musisz zawrzeć pętlę w funkcji success
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");
});
});
});
To powinno zadziałać.
API $http jest oparte na deferred/promise APIs wystawionym przez $q . Podczas gdy dla prostych wzorców użycia nie ma to'większego znaczenia, dla zaawansowanego użycia ważne jest, aby zapoznać się z tymi interfejsami API i gwarancjami, które zapewniają.
Możesz rzucić okiem na deferred/promise APIs, jest to ważna koncepcja Angulara do wykonywania płynnych akcji asynchronicznych.
musisz użyć zagnieżdżonych pętli angular.forEach dla JSON, jak pokazano poniżej:
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);
});
});