цикл foreach в angularjs


110

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

  1. Какая польза от функции итератора? Есть ли способ обойтись без этого?
  2. Какое значение имеют ключ и значение, как показано ниже?

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 и выводит в консоли «username is thomas»?


6
Поскольку вы не ждете , когда произойдет successваше $http.get(), поэтому, когда это angular.forEach()произойдет, $scope.dataвсе еще не определено.
Том

1
Есть ли какой-либо конкретный способ удержать выполнение кода до тех
пор,

Измените строку на эту angular.forEach (values, function (value, key) {console.log (key + ':' + value.Name);});
Israel Ocbina 08

Ответы:


208

Вопросы 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()что это асинхронный запрос.

Вы отправляете запрос своему сыну, ТОГДА, когда браузер заканчивает загрузку, он выполняет успешно. НО сразу после отправки вашего запроса вы выполняете цикл, 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");
         });
    });

});

Это должно работать.

Идти глубже

$ HTTP API основан на отложенном / пообещать API , доступный в $ д службой. Хотя для простых шаблонов использования это не имеет большого значения, для расширенного использования важно ознакомиться с этими API и гарантиями, которые они предоставляют.

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


2
Колин Б ( здесь профиль ) хотел прокомментировать это, successи error он объявлен устаревшим . Предлагается использовать thenметод вместо success. А теперь, @Colin, иди и ответь на несколько вопросов, чтобы получить 50 представителей! : P
Ничья

3
Асинхронный режим не является параллельным. Для параллели ему понадобятся веб-воркеры, а не обещания. Немного педантично, но стоит избегать дезинформации об этом, когда бы это ни происходило.
Кайл Бейкер

1
Спасибо @KyleBaker, я обновил этот ответ, вы правы, "параллель" - это злоупотребление языком.
sebastienbarbier

@sebastienbarbier, не могли бы вы помочь мне решить этот stackoverflow.com/questions/50100381/…
Nikson

7

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

1
Нет, вы бы использовали единственный цикл, и, откровенно говоря, в этом случае вы должны просто использовать собственный forEach (), а-ля values.forEach(object => console.log($ {object.name}: $ {object.password} )).
Кайл Бейкер

Просто измените строку console.log (ключ + ':' + значение); INTO console.log (ключ + ':' + value.Name);
Israel Ocbina 08

5

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

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

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

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

ключ = 1, значение = {"имя": "Линда", "пароль": "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");
                }
         });

2

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

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

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

2

В Angular 7 цикл for выглядит так, как показано ниже

var values = [
        {
            "name":"Thomas",
            "password":"thomas"
        },
        { 
            "name":"linda",
            "password":"linda"
        }];

for (let item of values)
{
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.