Я розбирався з циклом forEach
в AngularJS
. Є декілька моментів, які я не зрозумів у ньому.
angular.forEach($scope.data, function(value, key){});
angular.forEach($scope.data, function(value, key){});`
PS: Я спробував запустити цю функцію без аргументів і вона не спрацювала.
Ось мій json
:
[
{
"Name": "Thomas",
"Password": "thomasTheKing"
},
{
"Name": "Linda",
"Password": "lindatheQueen"
}
]
Мій файл 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");
});
});
**Ще одне питання: Чому у наведеній вище функції не вводиться умова if і не виводиться в консоль "ім'я користувача is thomas"?
Отже, по суті, перший параметр - це об'єкт для ітерації. Це може бути масив або об'єкт. Якщо це об'єкт типу:
var values = {name: 'misko', gender: 'male'};
Angular прийме кожне значення по черзі: перше - ім'я, друге - стать.
Якщо ваш об'єкт для ітерації є масивом (також можливо), наприклад, так:
[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
{ "Name" : "Linda", "Password" : "lindatheQueen" }]
Angular.forEach візьме по одному об'єкту, починаючи з першого, а потім з другого.
Для кожного з цих об'єктів він буде брати їх по черзі і виконувати певний код для кожного значення. Цей код називається функція ітератора. forEach є розумним і поводиться по-іншому, якщо ви використовуєте масив колекції. Ось деякий приклад:
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
Отже, ключ - це рядкове значення вашого ключа, а значення - це ... значення. Ви можете використовувати ключ для доступу до значення таким чином : obj['ім'я'] = 'Джон'
.
Якщо на цей раз ви виводите масив, як це:
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]
Тоді value - це ваш об'єкт (колекція), а key - це індекс вашого масиву, починаючи з:
[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
{ "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
1: { "Name" : "Linda", "Password" : "lindatheQueen" }}
Сподіваюся, це відповіло на ваше запитання. Ось JSFiddle для запуску коду і тестування, якщо хочете:
Проблема, схоже, пов'язана з тим, що $http.get()
є асинхронним запитом.
Ви відправляєте запит на сина, ПОТІМ коли браузер закінчує його завантаження, він виконується успішно. АЛЕ відразу після відправки запиту ви виконуєте цикл з використанням angular.forEach
, не дочекавшись відповіді вашого JSON.
Вам потрібно включити цикл в функцію 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");
});
});
});
Це повинно спрацювати.
API $http заснований на відкладених/обіцяних API, що надаються сервісом $q
сервісом. У той час як для простих шаблонів використання це не має особливого значення, для розширеного використання важливо ознайомитися з цими API і гарантіями, які вони надають.
Ви можете поглянути на deferred/promise APIs, це важлива концепція Angular, щоб зробити плавні асинхронні дії.
потрібно використовувати вкладені цикли angular.forEach для JSON, як показано нижче:
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(values, function(value, key){
console.log(key + ': ' + value);
});
angular.forEach(values, function(value, key){
console.log(key + ': ' + value.Name);
});