Schleife durch ein einfaches JavaScript-Objekt mit den Objekten als Mitglieder

Question

Wie kann ich eine Schleife durch alle Mitglieder in einem JavaScript-Objekt, einschließlich Werte, die Objekte sind?

Wie könnte ich zum Beispiel eine Schleife durchlaufen (und jeweils auf "your_name" und "your_message" zugreifen)?

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar"
    }
}

Answer 1

for (var key in validation_messages) {
    // skip loop if the property is from prototype
    if (!validation_messages.hasOwnProperty(key)) continue;

    var obj = validation_messages[key];
    for (var prop in obj) {
        // skip loop if the property is from prototype
        if (!obj.hasOwnProperty(prop)) continue;

        // your code
        alert(prop + " = " + obj[prop]);
    }
}

Answer 2

Unter ECMAScript 5 können Sie Folgendes kombinieren Object.keys() y Array.prototype.forEach() :

var obj = {
  first: "John",
  last: "Doe"
};

//
//  Visit non-inherited enumerable keys
//
Object.keys(obj).forEach(function(key) {

  console.log(key, obj[key]);

});

Answer 3

Unter ES6/2015 können Sie ein Objekt wie folgt in einer Schleife durchlaufen (unter Verwendung der Pfeilfunktion ):

Object.keys(myObj).forEach(key => {
  console.log(key);        // the name of the current key.
  console.log(myObj[key]); // the value of the current key.
});

JS-Behälter

Unter ES7/2016 können Sie Object.entries anstelle von Object.keys und ein Objekt wie folgt durchlaufen:

Object.entries(myObj).forEach(([key, val]) => {
  console.log(key); // the name of the current key.
  console.log(val); // the value of the current key.
});

Das oben genannte würde auch als Einzeiler :

Object.entries(myObj).forEach(([key, val]) => console.log(key, val));

jsbin

Falls Sie auch durch verschachtelte Objekte schleifen wollen, können Sie eine rekursiv Funktion (ES6):

const loopNestedObj = obj => {
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === "object") loopNestedObj(obj[key]); // recurse.
    else console.log(key, obj[key]); // or do something with key and val.
  });
};

JS-Behälter

Die gleiche Funktion wie oben, aber mit ES7 Object.entries() anstelle von Object.keys() :

const loopNestedObj = obj => {
  Object.entries(obj).forEach(([key, val]) => {
    if (val && typeof val === "object") loopNestedObj(val); // recurse.
    else console.log(key, val); // or do something with key and val.
  });
};

Hier durchlaufen wir eine Schleife durch verschachtelte Objekte, ändern Werte und geben ein neues Objekt in einem Durchgang zurück, indem wir Object.entries() kombiniert mit Object.fromEntries() ( ES10/2019 ):

const loopNestedObj = obj =>
  Object.fromEntries(
    Object.entries(obj).map(([key, val]) => {
      if (val && typeof val === "object") [key, loopNestedObj(val)]; // recurse
      else [key, updateMyVal(val)]; // or do something with key and val.
    })
  );

Eine andere Möglichkeit der Schleifenbildung durch Objekte ist die Verwendung von für ... in y für ... von . Ver die schön geschriebene Antwort von vdegenne .

Answer 4

Das Problem dabei ist

for (var key in validation_messages) {
   var obj = validation_messages[key];
   for (var prop in obj) {
      alert(prop + " = " + obj[prop]);
   }
}

ist, dass Sie auch eine Schleife durch den Prototyp des primitiven Objekts durchlaufen.

Mit diesem werden Sie es vermeiden:

for (var key in validation_messages) {
   if (validation_messages.hasOwnProperty(key)) {
      var obj = validation_messages[key];
      for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
            alert(prop + " = " + obj[prop]);
         }
      }
   }
}

Answer 5

Verwendung von Underscore.js's _.each :

_.each(validation_messages, function(value, key){
    _.each(value, function(value, key){
        console.log(value);
    });
});