在angularjs中的foreach循环

时间:2015-04-29 19:49:37

标签: angularjs foreach

我正在浏览forEach中的loop AngularJS。有几点我不明白。

  1. 迭代器函数有什么用?没有它有什么办法吗?
  2. 如下所示,键和值的重要性是什么?
  3. 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");
       });
    });
    

    另一个问题:如果条件和打印"用户名是thomas"上面的函数为什么不输入?在控制台?

5 个答案:

答案 0 :(得分:195)

问题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基于$ q公开的deferred/promise APIs   服务。虽然对于简单的使用模式,这并不重要   高级用法,熟悉这些API非常重要   以及他们提供的保证。

你可以看看deferred/promise APIs,Angular的一个重要概念是做出顺畅的异步动作。

答案 1 :(得分:6)

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

答案 2 :(得分:4)

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

第一次迭代,

  

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

第二次迭代,

  

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

要获得name的值,您可以使用value.namevalue["name"]。与您的password相同,您使用value.passwordvalue["password"]

以下代码会为您提供所需内容:

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

答案 3 :(得分:2)

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

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

for (let item of values)
{
}

答案 4 :(得分:1)

将行更改为此

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

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