foreach Schleife in eckigen js


110

Ich ging durch die forEach loopin AngularJS. Es gibt einige Punkte, die ich nicht verstanden habe.

  1. Was ist die Verwendung der Iteratorfunktion? Gibt es einen Weg, ohne ihn auszukommen?
  2. Welche Bedeutung haben der Schlüssel und der Wert, wie unten gezeigt?

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

PS: Ich habe versucht, diese Funktion ohne die Argumente auszuführen, aber es hat nicht funktioniert.

Hier ist mein json:

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

Meine JavaScriptDatei:

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

Eine andere Frage : Warum wird die obige Funktion nicht aktiviert, wenn Bedingung und "Benutzername ist Thomas" in der Konsole gedruckt werden?


6
Weil du nicht darauf wartest, dass das successpassiert$http.get() somit , wenn angular.forEach()geschieht, $scope.dataist noch nicht definiert.
Tom

1
Gibt es eine spezielle Möglichkeit, die Ausführung des Codes bis zum Laden des
JSON

Ändern Sie die Zeile in diesen Winkel.forEach (Werte, Funktion (Wert, Schlüssel) {console.log (Schlüssel + ':' + Wert.Name);});
Israel Ocbina

Antworten:


208

Fragen 1 & 2

Der erste Parameter ist also im Grunde das Objekt, auf dem iteriert werden soll. Es kann ein Array oder ein Objekt sein. Wenn es sich um ein Objekt wie dieses handelt:

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

Angular nimmt jeden Wert einzeln an, der erste ist der Name, der zweite ist das Geschlecht.

Wenn Ihr zu iterierendes Objekt ein Array ist (auch möglich), wie folgt:

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

Angular.forEach nimmt eins nach dem anderen, beginnend mit dem ersten Objekt, dann dem zweiten Objekt.

Für jedes dieser Objekte werden sie einzeln verwendet und für jeden Wert ein bestimmter Code ausgeführt. Dieser Code wird aufgerufen Iteratorfunktion bezeichnet . forEach ist intelligent und verhält sich anders, wenn Sie ein Array einer Sammlung verwenden. Hier ist ein Beispiel:

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

Schlüssel ist also der Zeichenfolgenwert Ihres Schlüssels und Wert ist ... der Wert. Mit dem Schlüssel können Sie wie folgt auf Ihren Wert zugreifen:obj['name'] = 'John'

Wenn Sie diesmal ein Array wie folgt anzeigen:

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]

Der Wert ist also Ihr Objekt (Sammlung) und der Schlüssel ist der Index Ihres Arrays, da:

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

Ich hoffe es beantwortet deine Frage. Hier ist eine JSFiddle, mit der Sie Code ausführen und testen können, wenn Sie möchten: http://jsfiddle.net/ygahqdge/

Debuggen Ihres Codes

Das Problem scheint von der Tatsache zu kommen $http.get() es sich um eine asynchrone Anforderung handelt.

Sie senden eine Anfrage an Ihren Sohn, DANN, wenn Ihr Browser das Herunterladen beendet, wird der Erfolg ausgeführt. ABER kurz nachdem Sie Ihre Anfrage gesendet haben, führen Sie eine Schleife mit durch, angular.forEachohne auf die Antwort Ihres JSON zu warten.

Sie müssen die Schleife in die Erfolgsfunktion aufnehmen

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

});

Das sollte funktionieren.

Tiefer gehen

Die $ http- API basiert auf den vom $ q-Dienst bereitgestellten verzögerten / versprochenen APIs . Während dies für einfache Verwendungsmuster nicht viel ausmacht, ist es für die erweiterte Verwendung wichtig, sich mit diesen APIs und den von ihnen bereitgestellten Garantien vertraut zu machen.

Sie können einen Blick auf verzögerte / versprochene APIs werfen. Es ist ein wichtiges Konzept von Angular, reibungslose asynchrone Aktionen auszuführen.


2
Colin B (Profil hier .) Wollte das kommentieren successund error wurde veraltet . Es wird empfohlen, die thenMethode anstelle von zu verwenden success. Jetzt, @Colin, geh raus und beantworte ein paar Fragen, um 50 Wiederholungen zu bekommen! : P
Drew

3
Async ist nicht parallel. Parallel dazu braucht er Webworker, keine Versprechen. Winzig etwas pedantisch, aber es lohnt sich, Fehlinformationen darüber zu stoppen, wann immer es passiert.
Kyle Baker

1
Danke @KyleBaker, ich habe diese Antwort aktualisiert, du hast Recht "parallel" war ein Sprachmissbrauch.
Sebastastbarbarier

@sebastienbarbier können Sie mir bitte helfen, dieses stackoverflow.com/questions/50100381/…
Nikson

7

Sie müssen verschachtelte angle.forEach-Schleifen für JSON verwenden, wie unten gezeigt:

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

1
Nein, Sie würden eine einzelne Schleife verwenden, und ehrlich gesagt sollten Sie in diesem Fall nur das native forEach () verwenden, a la values.forEach(object => console.log($ {object.name}: $ {object.password} )).
Kyle Baker

Ändern Sie einfach die Zeile console.log (Schlüssel + ':' + Wert); INTO console.log (Schlüssel + ':' + Wert.Name);
Israel Ocbina

5

Der angular.forEach()wird durch Ihr jsonObjekt iterieren .

Erste Iteration,

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

Zweite Iteration,

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

Um den Wert Ihres zu erhalten name, können Sie value.nameoder verwenden value["name"]. Gleiches gilt für Sie password, Sie verwenden value.passwordoder value["password"].

Der folgende Code gibt Ihnen, was Sie wollen:

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

2

Ändern Sie die Zeile in diese

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

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

2

In Winkel 7 ist die for-Schleife wie unten

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

for (let item of values)
{
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.