foreach loop in angularjs

Stavo attraversando la forEach loopa AngularJS. Ci sono pochi punti che non ho capito al riguardo.

1. Qual è l'uso della funzione iteratore? C'è un modo per farne a meno?
2. Qual è il significato della chiave e del valore come mostrato di seguito?

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

PS: ho provato a eseguire questa funzione senza gli argomenti e non ha funzionato.

Ecco il mio json:

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

Il mio JavaScriptfile:

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

Un'altra domanda : perché la funzione sopra non entra in if condition e stampa "username is thomas" nella console?

Domande 1 e 2

Quindi, fondamentalmente, il primo parametro è l'oggetto su cui iterare. Può essere un array o un oggetto. Se è un oggetto come questo:

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

Angular prenderà ogni valore uno per uno, il primo è il nome, il secondo è il genere.

Se il tuo oggetto su cui iterare è un array (anche possibile), come questo:

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

Angular.forEach prenderà uno per uno partendo dal primo oggetto, quindi dal secondo oggetto.

Per ciascuno di questi oggetti, li prenderà quindi uno per uno ed eseguirà un codice specifico per ogni valore. Questo codice è chiamato funzione iteratore . forEach è intelligente e si comporta in modo diverso se si utilizza un array di una raccolta. Ecco alcuni esempi:

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

Quindi la chiave è il valore stringa della tua chiave e il valore è ... il valore. Puoi usare la chiave per accedere al tuo valore in questo modo:obj['name'] = 'John'

Se questa volta visualizzi un array, come questo:

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]

Quindi il valore è il tuo oggetto (collezione) e la chiave è l'indice del tuo array poiché:

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

Spero che risponda alla tua domanda. Ecco un JSFiddle per eseguire del codice e testarlo se lo desideri: http://jsfiddle.net/ygahqdge/

Debug del codice

Il problema sembra derivare dal fatto che $http.get()è una richiesta asincrona.

Mandi una query a tuo figlio, POI quando il browser termina il download, viene eseguito con successo. MA subito dopo aver inviato la tua richiesta esegui un loop utilizzando angular.forEachsenza attendere la risposta del tuo JSON.

È necessario includere il ciclo nella funzione di successo

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

});

Questo dovrebbe funzionare.

Andando più in profondità

L' API $ http si basa sulle API differite / promesse esposte dal servizio $ q. Sebbene per modelli di utilizzo semplici ciò non sia molto importante, per l'utilizzo avanzato è importante acquisire familiarità con queste API e le garanzie che forniscono.

Puoi dare un'occhiata alle API differite / promesse , è un concetto importante di Angular per eseguire azioni asincrone fluide.

devi usare angular.forEach annidato per JSON come mostrato di seguito:

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

L' angular.forEach()itererà attraverso il tuo jsonoggetto.

Prima iterazione,

chiave = 0, valore = {"name": "Thomas", "password": "thomasTheKing"}

Seconda iterazione,

chiave = 1, valore = {"name": "Linda", "password": "lindatheQueen"}

Per ottenere il valore del tuo name, puoi usare value.nameo value["name"]. Lo stesso con il tuo password, usi value.passwordo value["password"].

Il codice seguente ti darà ciò che desideri:

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

Cambia la linea in questa

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

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

In Angular 7 il ciclo for è come sotto

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

for (let item of values)
{
}