angularjs中的foreach循环

Posted 2023-02-22

【中文标题】angularjs中的foreach循环

【英文标题】：foreach loop in angularjs

【发布时间】：2015-07-09 07:08:38

【问题描述】：

我正在查看AngularJS 中的forEach loop。有几点我不明白。

迭代器函数有什么用？没有它有什么办法吗？ 如下图key和value的意义是什么？

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”？

【问题讨论】：

因为您没有等待$http.get() 发生success，因此，当angular.forEach() 发生时，$scope.data 仍然未定义。

是否有任何特定的方法来保持代码的执行直到 json 被加载

换行成这个 angular.forEach(values, function(value, key) console.log(key + ': ' + value.Name); );

【参考方案1】：

在 Angular 7 中，for 循环如下所示

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

for (let item of values)

【参考方案2】：

angular.forEach() 将遍历您的 json 对象。

第一次迭代，

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

第二次迭代，

key = 1, value = "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");
                
         );

【参考方案3】：

把这行改成这样

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

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

【参考方案4】：

问题 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 是你的 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 执行循环，而无需等待 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 基于 $q 公开的 deferred/promise APIs 服务。虽然对于简单的使用模式，这并不重要，因为 高级用法 熟悉这些 API 很重要 以及他们提供的保证。

你可以看看deferred/promise APIs，它是Angular的一个重要概念，使异步动作平滑。

【讨论】：

Colin B (profile Here . ) 想评论 success 和 error have been deprecated。建议使用then 方法而不是success。现在，@Colin，出去回答几个问题以获得 50 个代表！ :P

异步不是并行的。对于并行，他需要网络工作者，而不是承诺。有点迂腐，但无论何时发生都值得停止错误信息。

谢谢@KyleBaker，我更新了这个答案，你说得对，“并行”是一种语言滥用。

@sebastienbarbier 你能帮我解决这个问题吗***.com/questions/50100381/…

【参考方案5】：

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

【讨论】：

不，您将使用单个循环，坦率地说，在这种情况下，您应该只使用本机 forEach()，例如 values.forEach(object => console.log($object.name: $object.密码)).

改行console.log(key + ': ' + value); INTO console.log(key + ': ' + value.Name);