foreach loop in angularjs

Saya akan melalui forEach loopdalam AngularJS. Ada beberapa hal yang saya tidak mengerti tentang itu.

1. Apa gunanya fungsi iterator? Apakah ada cara untuk pergi tanpanya?
2. Apa pentingnya kunci dan nilai seperti yang ditunjukkan di bawah ini?

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

PS: Saya mencoba menjalankan fungsi ini tanpa argumen dan tidak berhasil.

Ini saya json:

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

JavaScriptFile saya :

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

Pertanyaan lain : Mengapa fungsi di atas tidak masuk pada kondisi if dan mencetak "username is thomas" di konsol?

Pertanyaan 1 & 2

Jadi pada dasarnya, parameter pertama adalah objek yang akan diiterasi. Ini bisa berupa array atau objek. Jika itu objek seperti ini:

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

Sudut akan mengambil setiap nilai satu per satu yang pertama adalah nama, yang kedua adalah jenis kelamin.

Jika objek Anda untuk melakukan iterasi adalah larik (juga mungkin), seperti ini:

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

Angular.forEach akan mengambil satu per satu dimulai dari objek pertama, lalu objek kedua.

Untuk setiap objek ini, ia akan mengambilnya satu per satu dan menjalankan kode tertentu untuk setiap nilai. Kode ini disebut fungsi iterator . forEach cerdas dan berperilaku berbeda jika Anda menggunakan larik koleksi. Berikut beberapa contohnya:

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

Jadi kunci adalah nilai string dari kunci Anda dan nilainya adalah ... nilai. Anda dapat menggunakan kunci untuk mengakses nilai Anda seperti ini:obj['name'] = 'John'

Jika saat ini Anda menampilkan array, seperti ini:

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]

Jadi nilai adalah objek Anda (koleksi), dan kunci adalah indeks dari array Anda karena:

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

Saya harap ini menjawab pertanyaan Anda. Berikut adalah JSFiddle untuk menjalankan beberapa kode dan menguji jika Anda mau: http://jsfiddle.net/ygahqdge/

Debugging kode Anda

Masalahnya tampaknya berasal dari fakta $http.get()adalah permintaan asynchronous.

Anda mengirim permintaan pada anak Anda, KEMUDIAN ketika browser Anda selesai mengunduhnya, eksekusi itu berhasil. TAPI setelah mengirim permintaan Anda, lakukan loop menggunakan angular.forEachtanpa menunggu jawaban JSON Anda.

Anda perlu memasukkan loop dalam fungsi sukses

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

});

Ini seharusnya berhasil.

Lebih dalam

The $ http API didasarkan pada ditangguhkan / janji API terpapar oleh layanan $ q. Sementara untuk pola penggunaan sederhana ini tidak terlalu menjadi masalah, untuk penggunaan tingkat lanjut, penting untuk membiasakan diri Anda dengan API ini dan jaminan yang diberikannya.

Anda dapat melihat API tangguhan / janji , ini adalah konsep penting dari Angular untuk membuat tindakan asinkron yang mulus.

Anda harus menggunakan loop bersarang angular.forEach untuk JSON seperti yang ditunjukkan di bawah ini:

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

The angular.forEach()akan iterate melalui Anda jsonobjek.

Iterasi pertama,

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

Iterasi kedua,

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

Untuk mendapatkan nilai Anda name, Anda dapat menggunakan value.nameatau value["name"]. Sama dengan Anda password, Anda menggunakan value.passwordatau value["password"].

Kode di bawah ini akan memberikan apa yang Anda inginkan:

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

Ubah garis menjadi ini

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

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

Pada Angular 7 loop for seperti di bawah ini

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

for (let item of values)
{
}