angularjs의 foreach 루프

나는 통해 가고 있었다 forEach loop에서 AngularJS. 내가 이해하지 못한 점이 몇 가지 있습니다.

1. 반복기 기능의 사용은 무엇입니까? 그것없이 갈 방법이 있습니까?
2. 아래와 같이 키와 값의 의미는 무엇입니까?

angular.forEach($scope.data, function(value, key){});

추신 : 이 함수를 인수없이 실행하려고했지만 작동하지 않았습니다.

여기 내 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 condition에 들어 가지 않고 콘솔에 "username is thomas"를 출력합니까?

질문 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

따라서 key는 키의 문자열 값이고 값은 ... 값입니다. 키를 사용하여 다음과 같이 값에 액세스 할 수 있습니다.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]

따라서 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://jsfiddle.net/ygahqdge/

코드 디버깅

문제는 사실 $http.get()비동기 요청 인 것 같습니다 .

당신은 당신의 아들에 쿼리를 보내 그때 당신은 브라우저의 끝이 그 성공을 실행 다운로드 할 때. 그러나 요청을 보낸 직후 angular.forEachJSON의 응답을 기다리지 않고 사용하여 루프를 수행 하십시오.

성공 함수에 루프를 포함해야합니다.

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를 약속 은 $ Q 서비스에 의해 노출을. 단순한 사용 패턴의 경우 이는 그다지 중요하지 않지만 고급 사용의 경우 이러한 API와 API가 제공하는 보증에 익숙해지는 것이 중요합니다.

지연 / 약속 API를 살펴볼 수 있습니다 . 부드러운 비동기 작업을 만드는 것이 Angular의 중요한 개념입니다.

아래와 같이 JSON에 중첩 된 angular.forEach 루프를 사용해야합니다.

 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()통해 반복됩니다json 객체입니다.

첫 번째 반복,

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

두 번째 반복,

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

의 가치를 얻으려면 또는 name을 사용할 수 있습니다 . 당신과 같은 , 사용 또는value.namevalue["name"]passwordvalue.passwordvalue["password"] .

아래 코드는 원하는 것을 제공합니다.

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

라인을 이것으로 변경

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

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

Angular 7에서 for 루프는 아래와 같습니다.

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

for (let item of values)
{
}