[解決済み] angularjsのforeachループ

質問

私は 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条件を入力せず、コンソールに "ユーザ名はthomas"と表示するのでしょうか？

どのように解決するのですか？

質問1＆amp;2

基本的に、最初のパラメータは反復処理するオブジェクトです。配列でもオブジェクトでも構いません。それがこのようなオブジェクトである場合。

var values = {name: 'misko', gender: 'male'};

Angularはそれぞれの値を1つずつ取得します。1つ目は名前、2つ目は性別です。

反復処理するオブジェクトが配列の場合（これも可能）、以下のようになります。

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]

Angular.forEachは1つ目のオブジェクトから始まり、2つ目のオブジェクトを1つずつ取得します。

このオブジェクトのそれぞれについて、1つずつ取得し、それぞれの値に対して特定のコードを実行します。このコードは イテレータ関数 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はキーの文字列値、valueは...値ということです。キーを使って値にアクセスするには、次のようにします。 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.forEach を使ってループしています。

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");
         });
    });

});

これでうまくいくはずです。

もっと深く

その $http API は deferred/promise API を使用しています。 が公開する $q サービスによって公開されています。単純な使用法であれば、これはあまり重要ではありません。 高度な使用法では、これらのAPIとそれらが提供する保証に精通することが重要です。 とそれらが提供する保証に精通することが重要です。

をご覧ください。 deferred/promise API を見てみましょう。 を見てください。これはスムーズな非同期アクションを作るためのAngularの重要なコンセプトです。