vòng lặp foreach trong anglejs

Tôi đã đi qua forEach looptrong AngularJS. Có một vài điểm mà tôi không hiểu về nó.

1. Công dụng của hàm vòng lặp là gì? Có cách nào để đi mà không có nó?
2. Ý nghĩa của khóa và giá trị như hình dưới đây là gì?

angular.forEach($scope.data, function(value, key){});

Tái bút: Tôi đã cố gắng chạy hàm này mà không có đối số và nó không hoạt động.

Đây là của tôi json:

[
   {
     "Name": "Thomas",
     "Password": "thomasTheKing"
   },
   {
     "Name": "Linda",
     "Password": "lindatheQueen"
   }
]

JavaScriptTệp của tôi :

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

Một câu hỏi khác : Tại sao hàm trên không nhập điều kiện if và in "tên người dùng là thomas" trong bảng điều khiển?

Câu hỏi 1 & 2

Vì vậy, về cơ bản, tham số đầu tiên là đối tượng để lặp lại. Nó có thể là một mảng hoặc một đối tượng. Nếu nó là một đối tượng như thế này:

var values = {name: 'misko', gender: 'male'};

Angular sẽ lấy từng giá trị một, giá trị đầu tiên là tên, thứ hai là giới tính.

Nếu đối tượng của bạn để lặp lại là một mảng (cũng có thể), như sau:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]

Angular.forEach sẽ lấy từng cái một bắt đầu bởi đối tượng đầu tiên, sau đó là đối tượng thứ hai.

Đối với mỗi đối tượng này, nó sẽ lấy từng cái một và thực thi một mã cụ thể cho từng giá trị. Đoạn mã này được gọi là hàm vòng lặp . forEach thông minh và hoạt động khác nhau nếu bạn đang sử dụng một mảng của bộ sưu tập. Đây là một số ví dụ:

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

Vì vậy, khóa là giá trị chuỗi của khóa và giá trị là ... giá trị. Bạn có thể sử dụng khóa để truy cập giá trị của mình như sau:obj['name'] = 'John'

Nếu lần này bạn hiển thị một mảng, như sau:

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]

Vì vậy, giá trị là đối tượng của bạn (bộ sưu tập) và khóa là chỉ mục của mảng của bạn vì:

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

Tôi hy vọng nó trả lời câu hỏi của bạn. Đây là một JSFiddle để chạy một số mã và kiểm tra nếu bạn muốn: http://jsfiddle.net/ygahqdge/

Gỡ lỗi mã của bạn

Vấn đề dường như đến từ thực tế $http.get()là một yêu cầu không đồng bộ.

Bạn gửi một truy vấn cho con trai của bạn, SAU ĐÓ khi trình duyệt của bạn kết thúc tải xuống, nó sẽ thực thi thành công. NHƯNG ngay sau khi gửi yêu cầu của bạn, bạn thực hiện một vòng lặp bằng cách sử dụng angular.forEachmà không cần đợi câu trả lời của JSON của bạn.

Bạn cần bao gồm vòng lặp trong hàm thành công

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

});

Điều này sẽ hoạt động.

Đi sâu hơn

Các $ http API được dựa trên hoãn / hứa API tiếp xúc bởi dịch vụ $ q. Mặc dù đối với các mẫu sử dụng đơn giản, điều này không quan trọng lắm, nhưng đối với cách sử dụng nâng cao, điều quan trọng là bạn phải tự làm quen với các API này và các đảm bảo mà chúng cung cấp.

Bạn có thể xem xét các API trì hoãn / hứa hẹn , đây là một khái niệm quan trọng của Angular để thực hiện các hành động không đồng bộ trơn tru.

bạn phải sử dụng các vòng lặp angle.forEach lồng nhau cho JSON như được hiển thị bên dưới:

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

Các angular.forEach()sẽ lặp qua của bạn jsonđối tượng.

Lần lặp đầu tiên,

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

Lần lặp thứ hai,

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

Để nhận được giá trị của bạn name, bạn có thể sử dụng value.namehoặc value["name"]. Tương tự với của bạn password, bạn sử dụng value.passwordhoặc value["password"].

Đoạn mã dưới đây sẽ cung cấp cho bạn những gì bạn muốn:

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

Thay đổi dòng thành này

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

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

Trong Angular 7, vòng lặp for giống như bên dưới

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

for (let item of values)
{
}