在angularjs中的foreach循环

Question

我正在经历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");
   });
});

另一个问题:为什么上面的函数没有输入如果条件并在控制台中打印"用户名是托马斯"？

Answer 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

所以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.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由$ Q服务公开.虽然对于简单的使用模式而言这并不重要,但对于高级用法而言,熟悉这些API及其提供的保证非常重要.

您可以查看延迟/保证API,这是Angular的一个重要概念,可以实现平滑的异步操作.

Answer 2

您必须为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);
        });
    });

Answer 3

该angular.forEach()会通过你的迭代json对象。

第一次迭代

键= 0，值= {“名称”：“ Thomas”，“密码”：“ 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");
                }
         });