blocks|key|2703638|text|问题1和2|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2703639|所以基本上，第一个参数是要迭代的对象。它可以是数组，也可以是对象。如果它是这样的对象：|2703640|var+values+=+{name:+'misko',+gender:+'male'};|code-block|syntax|javascript|2703641|Angular将逐一获取每个值，第一个值是姓名，第二个值是性别。|2703642|如果要迭代的对象是一个数组(也可以)，如下所示：|2703643|[{+"Name"+:+"Thomas",+"Password"+:+"thomasTheKing"+},
+{+"Name"+:+"Linda",+"Password"+:+"lindatheQueen"+}]|2703644|Angular.forEach将从第一个对象开始逐个获取，然后是第二个对象。|2703645|对于每个对象，它将逐个获取它们，并为每个值执行特定的代码。这段代码称为迭代器函数。如果您使用的是集合的数组，则forEach是智能的，并且具有不同的行为。下面是一些例子：|2703646|var+obj+=+{name:+'misko',+gender:+'male'};
var+log+=+[];
angular.forEach(obj,+function(value,+key)+{
++console.log(key+%2B+':+'+%2B+value);
});
//+it+will+log+two+iteration+like+this
//+name:+misko
//+gender:+male|2703647|所以key是key的字符串值，value是...值。您可以使用密钥访问您的值，如下所示：obj['name']+=+'John'|offset|length|style|CODE|2703648|如果这次显示一个数组，如下所示：|2703649|var+values+=+[{+"Name"+:+"Thomas",+"Password"+:+"thomasTheKing"+},
+++++++++++{+"Name"+:+"Linda",+"Password"+:+"lindatheQueen"+}];
angular.forEach(values,+function(value,+key){
+++++console.log(key+%2B+':+'+%2B+value);
});
//+it+will+log+two+iteration+like+this
//+0:+[object+Object]
//+1:+[object+Object]|2703650|因此value是你的对象(集合)，key是数组的索引，因为：|2703651|[{+"Name"+:+"Thomas",+"Password"+:+"thomasTheKing"+},
+{+"Name"+:+"Linda",+"Password"+:+"lindatheQueen"+}]
//+is+equal+to
{0:+{+"Name"+:+"Thomas",+"Password"+:+"thomasTheKing"+},
+1:+{+"Name"+:+"Linda",+"Password"+:+"lindatheQueen"+}}|2703652|我希望它能回答你的问题。这是一个可以运行一些代码并进行测试的JSFiddle：http://jsfiddle.net/ygahqdge/|2703653|调试你的代码|2703654|问题似乎来自于$http.get()是一个异步请求的事实。|2703655|你在你的儿子上发送一个查询，当你的浏览器下载成功时，然后是。但在发送请求后，您可以使用angular.forEach执行循环，而无需等待JSON的回答。|BOLD|2703656|您需要将循环包含在成功函数中|2703657|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");
+++++++++});
++++});

});|2703658|这应该是可行的。|2703659|更深入地了解|2703660|2703661|+$http应用编程接口基于$q服务公开的deferred/promise+APIs。虽然对于简单的使用模式，这并不重要，但对于高级使用，熟悉这些API及其提供的保证是很重要的。|blockquote|2703662|2703663|2703664|你可以看看deferred/promise+APIs，它是Angular的一个重要概念，让异步动作变得流畅。|2703665|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ygahqdge/|1|https://docs.angularjs.org/api/ng/service/$http#!|2|https://docs.angularjs.org/api/ng/service/$q|3^0|0|0|0|0|0|0|0|0|0|18|K|0|0|0|0|0|13|T|0|0|0|7|B|0|Q|3|U|1|17|F|0|0|0|0|0|0|1|5|1|L|L|2|0|0|0|5|L|3|0^^$0|@$1|2|3|4|5|6|7|2A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2B|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|2C|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|2D|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|2E|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|2F|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|2G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|2H|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|2I|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|2J|8|@$W|2K|X|2L|Y|Z]]|9|@]|A|$]]|$1|10|3|11|5|6|7|2M|8|@]|9|@]|A|$]]|$1|12|3|13|5|F|7|2N|8|@]|9|@]|A|$G|H]]|$1|14|3|15|5|6|7|2O|8|@]|9|@]|A|$]]|$1|16|3|17|5|F|7|2P|8|@]|9|@]|A|$G|H]]|$1|18|3|19|5|6|7|2Q|8|@]|9|@$W|2R|X|2S|1|2T]]|A|$]]|$1|1A|3|1B|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|2V|8|@$W|2W|X|2X|Y|Z]]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2Y|8|@$W|2Z|X|30|Y|1G]|$W|31|X|32|Y|1G]|$W|33|X|34|Y|Z]]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|35|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|F|7|36|8|@]|9|@]|A|$G|H]]|$1|1L|3|1M|5|6|7|37|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|38|8|@]|9|@]|A|$]]|$1|1P|3|-4|5|6|7|39|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|1S|7|3A|8|@]|9|@$W|3B|X|3C|1|3D]|$W|3E|X|3F|1|3G]]|A|$]]|$1|1T|3|-4|5|6|7|3H|8|@]|9|@]|A|$]]|$1|1U|3|-4|5|6|7|3I|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|6|7|3J|8|@]|9|@$W|3K|X|3L|1|3M]]|A|$]]|$1|1X|3|-4|5|6|7|3N|8|@]|9|@]|A|$]]]|1Y|$1Z|$5|20|21|22|A|$23|24]]|25|$5|20|21|22|A|$23|26]]|27|$5|20|21|22|A|$23|28]]|29|$5|20|21|22|A|$23|28]]]]

<h2>Questions 1 &amp; 2</h2>

So basically, first parameter is the object to iterate on. It can be an array or an object. If it is an object like this :

<pre><code>var values = {name: 'misko', gender: 'male'};
</code></pre>

Angular will take each value one by one the first one is name, the second is gender.

If your object to iterate on is an array (also possible), like this :

<pre><code>[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
</code></pre>

Angular.forEach will take one by one starting by the first object, then the second object.

For each of this object, it will so take them one by one and execute a specific code for each value. This code is called the iterator function. forEach is smart and behave differently if you are using an array of a collection. Here is some exemple :

<pre><code>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
</code></pre>

So key is the string value of your key and value is ... the value. You can use the key to access your value like this : <code>obj['name'] = 'John'</code>

If this time you display an array, like this :

<pre><code>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]
</code></pre>

So then value is your object (collection), and key is the index of your array since :

<pre><code>[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}
</code></pre>

I hope it answer your question. Here is a JSFiddle to run some code and test if you want : <a href="http://jsfiddle.net/ygahqdge/" rel="noreferrer">http://jsfiddle.net/ygahqdge/</a>

<h2>Debugging your code</h2>

The problem seems to come from the fact <code>$http.get()</code> is an asynchronous request.

You send a query on your son, THEN when you browser end downloading it it execute success. BUT just after sending your request your perform a loop using <code>angular.forEach</code> without waiting the answer of your JSON.

You need to include the loop in the success function

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

});
</code></pre>

This should work.

<h2>Going more deeply</h2>

<blockquote>
 The <a href="https://docs.angularjs.org/api/ng/service/$http#!" rel="noreferrer">$http</a> API is based on the <a href="https://docs.angularjs.org/api/ng/service/$q" rel="noreferrer">deferred/promise APIs</a> exposed by the $q
 service. While for simple usage patterns this doesn't matter much, for
 advanced usage it is important to familiarize yourself with these APIs
 and the guarantees they provide.
</blockquote>

You can give a look at <a href="https://docs.angularjs.org/api/ng/service/$q" rel="noreferrer">deferred/promise APIs</a>, it is an important concept of Angular to make smooth asynchronous actions.

blocks|key|2916177|text|你必须为JSON使用嵌套的angular.forEach循环，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2916178|+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%2B":"%2Bv1);
++++++++});
++++});|code-block|syntax|javascript|2916179|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you have to use nested angular.forEach loops for JSON as shown below:

<pre><code> 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);
 });
 });
</code></pre>

blocks|key|136940|text|将该行更改为以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136941|+angular.forEach(values,+function(value,+key){
+++console.log(key+%2B+':+'+%2B+value);
+});

+angular.forEach(values,+function(value,+key){
+++console.log(key+%2B+':+'+%2B+value.Name);
+});|code-block|syntax|javascript|136942|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Change the line into this

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

 angular.forEach(values, function(value, key){
 console.log(key + ': ' + value.Name);
 });
</code></pre>

blocks|key|2703728|text|angular.forEach()将遍历您的json对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2703729|第一次迭代，|2703730|密码密钥=+0，值={“|2703731|”："Thomas"，"password“："thomasTheKing"}|blockquote|2703732|2703733|2703734|第二次迭代，|2703735|密码密钥=+1，值={“|2703736|”："Linda"，“”："lindatheQueen“}|2703737|2703738|2703739|要获取name的值，可以使用value.name或value["name"]。与您的password相同，您可以使用value.password或value["password"]。|2703740|下面的代码将为您提供所需的内容：|BOLD|2703741|+++angular.forEach(json,+function+(value,+key)
+++++++++{
++++++++++++++++//console.log(key);
++++++++++++++++//console.log(value);
++++++++++++++++if+(value.password+==+"thomasTheKing")+{
++++++++++++++++++++console.log("username+is+thomas");
++++++++++++++++}
+++++++++});|code-block|syntax|javascript|2703742|entityMap^0|0|H|M|4|0|0|0|0|0|0|0|0|0|0|0|3|4|E|A|P|D|16|8|1M|E|21|H|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|1K|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|20|8|@$9|21|A|22|B|10]]|D|@]|E|$]]|$1|11|3|12|5|13|7|23|8|@]|D|@]|E|$14|15]]|$1|16|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|17|$]]

The <code>angular.forEach()</code> will iterate through your <code>json</code> object.

First iteration,

<blockquote>
 key = 0, value = { "name" : "Thomas", "password" : "thomasTheKing"}
</blockquote>

Second iteration,

<blockquote>
 key = 1, value = { "name" : "Linda", "password" : "lindatheQueen" }
</blockquote>

To get the value of your <code>name</code>, you can use <code>value.name</code> or <code>value["name"]</code>. Same with your <code>password</code>, you use <code>value.password</code> or <code>value["password"]</code>.

The code below will give you what you want:

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

blocks|key|2916245|text|在Angular+7中，for循环如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2916246|var+values+=+[
++++++++{
++++++++++++"name":"Thomas",
++++++++++++"password":"thomas"
++++++++},
++++++++{+
++++++++++++"name":"linda",
++++++++++++"password":"linda"
++++++++}];

for+(let+item+of+values)
{
}|code-block|syntax|javascript|2916247|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In Angular 7 the for loop is like below 

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

for (let item of values)
{
}
</code></pre>

I was going through the <code>forEach</code> <code>loop</code> in <code>AngularJS</code>. There are few points that I did not understood about it.

<ol>
<li>What is the use of the iterator function? Is there any way to go without it?</li>
<li>What is the significance of the key and value as shown below?</li>
</ol>

<code>angular.forEach($scope.data, function(value, key){});</code>

PS: I tried to run this function without the arguments and it did not work.

Here's my <code>json</code>:

<pre><code>[
 {
 "Name": "Thomas",
 "Password": "thomasTheKing"
 },
 {
 "Name": "Linda",
 "Password": "lindatheQueen"
 }
]
</code></pre>

My <code>JavaScript</code> file: 

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

Another question: Why the function above does not enter on if condition and print "username is thomas" in the console?

foreach loop in angularjs

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我正在浏览AngularJS的forEach loop。关于它，有几点我是不理解的。迭代器函数的用途是什么？没有它有什么办法吗？如下所示的键和值的意义是什么？angular.forEach($scope.data, function(value, key){});PS:我试图在没有参数的情况下运行这个函数，但它不起作用...

问angularjs中的foreach循环
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问angularjs中的foreach循环EN