Frage Wie durchläuft man ein einfaches JavaScript-Objekt mit den Objekten als Mitglieder?


Wie kann ich alle Mitglieder in einem JavaScript-Objekt durchlaufen, das Werte enthält, die Objekte sind.

Zum Beispiel, wie könnte ich das durchgehen (Zugriff auf den "your_name" und "your_message" für jeden)?

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

1243
2018-05-28 16:18


Ursprung


Antworten:


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

1797
2018-05-28 16:20



Unter ECMAScript 5 können Sie kombinieren Object.keys() und 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]);

});


564
2018-04-20 22:04



Das Problem damit

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

Sie durchlaufen auch den Prototyp des primitiven Objekts.

Mit diesem wirst du 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]);
         }
      }
   }
}

363
2018-05-19 20:58



Im ES6 Sie können ein Objekt wie folgt durchlaufen: (using 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.
});

Jsbin

Im ES7 Sie können verwenden Object.entries Anstatt von Object.keys und Schleife durch ein Objekt wie folgt:

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 obige würde auch als funktionieren Einzeiler:

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

Jsbin

Falls Sie auch verschachtelte Objekte durchlaufen möchten, können Sie a 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.
  });
};

Jsbin

Wie oben, aber mit ES7 Object.entries Anstatt 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.
  });
};

Wenn du in bist funktionale Programmierung Sie können verwenden Object.keys/Object.entries um das Objekt aufzuzählen, dann die Werte zu verarbeiten und dann zu verwenden reduce() um zurück zu einem neuen Objekt zu konvertieren.

const loopNestedObj = (obj) => 
  Object.keys(obj)
    // Use .filter(), .map(), etc. if you need.
    .reduce((newObj, key) => 
      (obj[key] && typeof obj[key] === 'object') ?
        {...newObj, [key]: loopNestedObj(obj[key])} :  // recurse.
        {...newObj, [key]: obj[key]},                  // Define value.
      {});

142
2018-01-09 14:22



Verwenden Underscore.js _.each:

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

93
2017-09-16 12:11



Wenn Sie Rekursion verwenden, können Sie Objekteigenschaften beliebiger Tiefe zurückgeben.

function lookdeep(object){
    var collection= [], index= 0, next, item;
    for(item in object){
        if(object.hasOwnProperty(item)){
            next= object[item];
            if(typeof next== 'object' && next!= null){
                collection[index++]= item +
                ':{ '+ lookdeep(next).join(', ')+'}';
            }
            else collection[index++]= [item+':'+String(next)];
        }
    }
    return collection;
}

//example

var O={
    a:1, b:2, c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
};
var lookdeepSample= 'O={'+ lookdeep(O).join(',\n')+'}';


/*  returned value: (String)
O={
    a:1, 
    b:2, 
    c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
}

*/

52
2018-05-28 18:03



Ich weiß, dass es spät ist, aber ich habe 2 Minuten gebraucht, um diese optimierte und verbesserte Version von AgileJons Antwort zu schreiben:

var key, obj, prop, owns = Object.prototype.hasOwnProperty;

for (key in validation_messages ) {

    if (owns.call(validation_messages, key)) {

        obj = validation_messages[key];

        for (prop in obj ) {

            // using obj.hasOwnProperty might cause you headache if there is
            // obj.hasOwnProperty = function(){return false;}
            // but owns will always work 
            if (owns.call(obj, prop)) {
                console.log(prop, "=", obj[prop]);
            }

        }

    }

}

29
2017-09-05 06:17