Петля foreach в angularjs

Я проходил через forEach loop в AngularJS. Есть несколько моментов, о которых я не понимал.

  • Что такое функция итератора? Есть ли способ без него?
  • Каково значение ключа и значения, как показано ниже?

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 и печатает "имя пользователя thomas" в консоли?

ОТВЕТЫ

Ответ 1

Вопросы 1 и 2

Итак, в основном, первым параметром является объект для итерации. Это может быть массив или объект. Если это такой объект:

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['name'] = 'John'

Если на этот раз вы увидите массив, например:

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]

Итак, значение - это ваш объект (коллекция), а ключ - это индекс вашего массива с:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}

Надеюсь, он ответит на ваш вопрос. Вот JSFiddle для запуска кода и теста, если вы хотите: http://jsfiddle.net/ygahqdge/

Отладка вашего кода

Проблема, похоже, связана с тем, что $http.get() является асинхронным запросом.

Вы отправляете запрос своему сыну, THEN, когда вы завершаете загрузку браузера, он выполняет успех. НО сразу после отправки вашего запроса выполните цикл, используя angular.forEach, не дожидаясь ответа вашего JSON.

Вам нужно включить цикл в функцию успеха

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 и гарантии, которые они предоставляют.

Вы можете взглянуть на отложенные/обещающие API, это важная концепция Angular для выполнения плавных асинхронных действий.

Ответ 2

вам нужно использовать вложенные 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);
        });
    });

Ответ 3

Измените строку на

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

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

Ответ 4

angular.forEach() будет перебирать ваш объект json.

Первая итерация,

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

Вторая итерация,

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

Чтобы получить значение вашего name, вы можете использовать value.name или value["name"]. То же самое с вашим password, вы используете value.password или value["password"].

Код ниже даст вам то, что вы хотите:

   angular.forEach(json, function (value, key)
         {
                //console.log(key);
                //console.log(value);
                if (value.password == "thomasTheKing") {
                    console.log("username is thomas");
                }
         });