foreach loop ในเชิงมุม js

ฉันกำลังจะผ่านใน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");
   });
});

อีกคำถาม : ทำไมฟังก์ชั่นข้างบนไม่ใส่ if condition แล้วพิมพ์ "username is thomas" ในคอนโซล?

คำถามที่ 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

คีย์คือค่าสตริงของคีย์และค่าของคุณคือ ... ค่า คุณสามารถใช้คีย์เพื่อเข้าถึงค่าของคุณได้ดังนี้: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]

ดังนั้นค่าคือวัตถุของคุณ (คอลเลกชัน) และคีย์คือดัชนีของอาร์เรย์ของคุณตั้งแต่:

[{ "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 จะขึ้นอยู่กับรอการตัดบัญชี / APIs สัญญาสัมผัสโดยบริการ Q $ แม้ว่ารูปแบบการใช้งานที่เรียบง่ายจะไม่สำคัญมากนัก แต่สำหรับการใช้งานขั้นสูงสิ่งสำคัญคือต้องทำความคุ้นเคยกับ API เหล่านี้และการรับประกันที่มีให้

คุณสามารถดูAPIที่รอการตัดบัญชี / สัญญาซึ่งเป็นแนวคิดที่สำคัญของ Angular ในการดำเนินการแบบอะซิงโครนัสที่ราบรื่น

คุณต้องใช้ซ้อนกันเชิงมุมสำหรับแต่ละลูปสำหรับ JSON ดังที่แสดงด้านล่าง:

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

angular.forEach()จะย้ำผ่านของjsonวัตถุ

การทำซ้ำครั้งแรก

คีย์ = 0, value = {"name": "Thomas", "password": "thomasTheKing"}

การทำซ้ำครั้งที่สอง

คีย์ = 1, value = {"name": "Linda", "password": "lindatheQueen"}

ที่จะได้รับค่าของคุณnameคุณสามารถใช้หรือvalue.name value["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");
                }
         });

เปลี่ยนสายเป็นสิ่งนี้

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

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

ใน Angular 7 for loop จะเป็นดังนี้

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

for (let item of values)
{
}