web-dev-qa-db-ja.com

angularjsのforeachループ

私はforEachのloopAngularJSを通り抜けていました。私がそれについて理解していなかったという点がいくつかあります。

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

もう一つの質問 ：コンソールに「username is thomas」と表示されているのにどうして上記の機能がオンにならないのですか？

angularjsforeach
100
Pragam Shrivastava

質問1と2

したがって、基本的に、最初のパラメータは反復対象です。それは配列またはオブジェクトです。それがこのようなオブジェクトであるならば：

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

Angularは各値を一つずつ取り、最初のものは名前、2番目のものは性別です。

反復対象のオブジェクトが配列（これも可能）である場合は、次のようになります。

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

Angular.forEachは、最初のオブジェクトから始めて2番目のオブジェクトから順に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()が非同期リクエストであることから来ているようです。

あなたはあなたの息子にクエリを送ります、あなたがそれをダウンロードするのをブラウザが終了するとき、それは成功を実行します _そして_ 。 _ but _ リクエストを送信した直後に、JSONの応答を待たずにangular.forEachを使用してループを実行します。

成功関数にループを含める必要があります

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 AP​​Iは、$ qサービスによって公開される deferred/promise API に基づいています。単純な使用パターンではこれはあまり重要ではありませんが、高度な使用ではこれらのAPIとそれらが提供する保証について十分に理解することが重要です。

deferred/promise API を見てください。スムーズな非同期アクションを行うことがAngularの重要な概念です。

195
sebastienbarbier

以下に示すように、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);
        });
    });
6
Cherry

angular.forEach()はあなたのjsonオブジェクトを通して繰り返します。

最初の繰り返し

キー= 0、値= {"name"： "Thomas"、 "password"： "thomasTheKing"}

2回目の繰り返し

キー= 1、値= {"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");
                }
         });
4
nrs

このに行を変更

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

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

Angular 7では、forループは次のようになります

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

for (let item of values)
{
}
1
sajadre