Wie kann ich alle Elemente in einem JavaScript-Objekt durchlaufen, einschließlich der Werte, die Objekte sind?

Wie könnte ich dies beispielsweise durchlaufen (Zugriff auf "your_name" und "your_message" für jede)?

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

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

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

});

Das Problem damit

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

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

Mit diesem vermeiden Sie es:

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

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

jsbin

In ES7 / 2016 können Sie verwenden Object.entriesstatt Object.keysund Schleife durch ein Objekt wie folgt aus :

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 Einzeiler funktionieren :

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

jsbin

Wenn Sie auch verschachtelte Objekte durchlaufen möchten, können Sie eine rekursive Funktion (ES6) verwenden:

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 beschrieben, jedoch 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 verschachtelte Objekte, ändern Werte und geben ein neues Objekt auf einmal zurück, indem wir es Object.entries()mit Object.fromEntries()( ES10 / 2019 ) kombinieren :

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

Verwenden von Underscore.js_.each :

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

Wenn Sie die 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
}

*/

Diese Antwort ist eine Zusammenfassung der Lösungen, die in diesem Beitrag mit einigen Leistungsrückmeldungen bereitgestellt wurden . Ich denke, es gibt zwei Anwendungsfälle, und das OP hat nicht erwähnt, ob er auf die Schlüssel zugreifen muss, um sie während des Schleifenprozesses zu verwenden.

I. Auf die Schlüssel muss zugegriffen werden.

✔ die ofund Object.keysAnsatz

let k;
for (k of Object.keys(obj)) {

    /*        k : key
     *   obj[k] : value
     */
}

✔ der inAnsatz

let k;
for (k in obj) {

    /*        k : key
     *   obj[k] : value
     */
}

Verwenden Sie dieses mit Vorsicht, da es prototypische Eigenschaften von drucken könnte obj

✔ der ES7-Ansatz

for (const [key, value] of Object.entries(obj)) {

}

Zum Zeitpunkt der Bearbeitung würde ich die ES7-Methode jedoch nicht empfehlen, da JavaScript viele Variablen intern initialisiert, um diese Prozedur zu erstellen (Beweise finden Sie in den Rückmeldungen). Wenn Sie keine große App entwickeln, die eine Optimierung verdient, ist dies in Ordnung. Wenn jedoch die Optimierung Ihre Priorität ist, sollten Sie darüber nachdenken.

II. wir müssen nur auf jeden Wert zugreifen,

✔ die ofund Object.valuesAnsatz

let v;
for (v of Object.values(obj)) {

}

Weitere Rückmeldungen zu den Tests:

• Caching Object.keysoder Object.valuesLeistung ist vernachlässigbar

Zum Beispiel,

const keys = Object.keys(obj);
let i;
for (i of keys) {
  //
}
// same as
for (i of Object.keys(obj)) {
  //
}

• Für Object.valuesFall einer native Verwendung forscheint Schleife mit zwischengespeicherten Variablen in Firefox ein wenig schneller zu sein als eine mit for...ofSchleife. Allerdings ist der Unterschied nicht so wichtig , und Chrome läuft for...ofschneller als nativer forSchleife, so dass ich zu Verwendung empfehlen würde , for...ofwenn sie mit den Umgang Object.valuesin allen Fällen (4. und 6. Tests).

• In Firefox ist die for...inSchleife sehr langsam. Wenn wir den Schlüssel während der Iteration zwischenspeichern möchten, ist es besser, ihn zu verwenden Object.keys. Plus Chrome führt beide Strukturen mit gleicher Geschwindigkeit aus (1. und letzter Test).

Sie können die Tests hier überprüfen: https://jsperf.com/es7-and-misc-loops

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

        }

    }

}

for(var k in validation_messages) {
    var o = validation_messages[k];
    do_something_with(o.your_name);
    do_something_else_with(o.your_msg);
}

p ist der Wert

for (var key in p) {
  alert(key + ' => ' + p[key]);
}

ODER

Object.keys(p).forEach(key => { console.log(key, p[key]) })

In ES7 können Sie Folgendes tun:

for (const [key, value] of Object.entries(obj)) {
  //
}

for(var key in validation_messages){
    for(var subkey in validation_messages[key]){
        //code here
        //subkey being value, key being 'yourname' / 'yourmsg'
    }
}

Nur wenige Möglichkeiten, das zu tun ...

1) 2 Schichten für ... in Schleife ...

for (let key in validation_messages) {
   const vmKeys = validation_messages[key];
   for (let vmKey in vmKeys) {
      console.log(vmKey + vmKeys[vmKey]);
   }
}

2) VerwendenObject.key

Object.keys(validation_messages).forEach(key => {
   const vmKeys = validation_messages[key];
   Object.keys(vmKeys).forEach(key => {
    console.log(vmKeys + vmKeys[key]);
   });
});

3) Rekursive Funktion

const recursiveObj = obj => {
  for(let key in obj){
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      console.log(key + obj[key]);
    } else {
      recursiveObj(obj[key]);
    }
  }
}

Und nenne es wie:

recursiveObj(validation_messages);

Hier kommt die verbesserte und rekursive Version der AgileJon-Lösung ( Demo ):

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

    if(typeof obj[key] !== 'object'){
      //your code
      console.log(key+" = "+obj[key]);
    } else {
      loopThrough(obj[key]);
    }
  }
}
loopThrough(validation_messages);

Diese Lösung funktioniert für alle Arten von unterschiedlichen Tiefen.

Andere Option:

var testObj = {test: true, test1: false};
for(let x of Object.keys(testObj)){
    console.log(x);
}

ECMAScript-2017, das erst vor einem Monat fertiggestellt wurde, führt Object.values ​​() ein. Jetzt können Sie Folgendes tun:

let v;
for (v of Object.values(validation_messages))
   console.log(v.your_name);   // jimmy billy

Ich denke, es ist erwähnenswert, dass jQuery dies gut regelt $.each().

Siehe: https://api.jquery.com/each/

Zum Beispiel:

$('.foo').each(function() {
    console.log($(this));
});

$(this)ist das einzelne Element innerhalb des Objekts. Wechseln Sie $('.foo')zu einer Variablen, wenn Sie die Selector-Engine von jQuery nicht verwenden möchten.

var obj={
name:"SanD",
age:"27"
}
Object.keys(obj).forEach((key)=>console.log(key,obj[key]));

Um das JavaScript-Objekt zu durchlaufen, können wir forEach verwenden und um den Code zu optimieren, können wir die Pfeilfunktion verwenden

Ich konnte die oben genannten Beiträge nicht dazu bringen, genau das zu tun, wonach ich gesucht hatte.

Nachdem ich mit den anderen Antworten hier herumgespielt hatte, machte ich das. Es ist hacky, aber es funktioniert!

Für dieses Objekt:

var myObj = {
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"}
};

... dieser Code:

// Get every value in the object into a separate array item ...
function buildArray(p_MainObj, p_Name) {
    var variableList = [];
    var thisVar = "";
    var thisYes = false;
    for (var key in p_MainObj) {
       thisVar = p_Name + "." + key;
       thisYes = false;
       if (p_MainObj.hasOwnProperty(key)) {
          var obj = p_MainObj[key];
          for (var prop in obj) {
            var myregex = /^[0-9]*$/;
            if (myregex.exec(prop) != prop) {
                thisYes = true;
                variableList.push({item:thisVar + "." + prop,value:obj[prop]});
            }
          }
          if ( ! thisYes )
            variableList.push({item:thisVar,value:obj});
       }
    }
    return variableList;
}

// Get the object items into a simple array ...
var objectItems = buildArray(myObj, "myObj");

// Now use them / test them etc... as you need to!
for (var x=0; x < objectItems.length; ++x) {
    console.log(objectItems[x].item + " = " + objectItems[x].value);
}

... erzeugt dies in der Konsole:

myObj.pageURL = BLAH
myObj.emailBox.model = emailAddress
myObj.emailBox.selector = #emailAddress
myObj.passwordBox.model = password
myObj.passwordBox.selector = #password

Die Lösung, die für mich funktioniert, ist die folgende

_private.convertParams=function(params){
    var params= [];
    Object.keys(values).forEach(function(key) {
        params.push({"id":key,"option":"Igual","value":params[key].id})
    });
    return params;
}

Exotisch - tiefe Traverse

JSON.stringify(validation_messages,(field,value)=>{
  if(!field) return value;

  // ... your code

  return value;
})

In dieser Lösung verwenden wir einen Ersetzer , mit dem ganze Objekte und verschachtelte Objekte tief durchlaufen werden können. Auf jeder Ebene erhalten Sie alle Felder und Werte. Wenn Sie den vollständigen Pfad zu jedem Feld benötigen, klicken Sie hier

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar",
        "deep": {
          "color": "red",
          "size": "10px"
        }
    }
}

JSON.stringify(validation_messages,(field,value)=>{
  if(!field) return value;
  
  console.log(`key: ${field.padEnd(11)} - value: ${value}`);
  
  return value;
})

In meinem Fall (auf der Grundlage des Vorstehenden) ist eine beliebige Anzahl von Ebenen möglich.

var myObj = {
    rrr: undefined,
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"},
    proba: {odin:{dva:"rr",trr:"tyuuu"}, od:{ff:5,ppa:{ooo:{lll:'lll'}},tyt:'12345'}}
};


function lookdeep(obj,p_Name,gg){
    var A=[], tem, wrem=[], dd=gg?wrem:A;
    for(var p in obj){
        var y1=gg?'':p_Name, y1=y1 + '.' + p;
        if(obj.hasOwnProperty(p)){
           var tem=obj[p];
           if(tem && typeof tem=='object'){
               a1=arguments.callee(tem,p_Name,true);
               if(a1 && typeof a1=='object'){for(i in a1){dd.push(y1 + a1[i])};}
            }
            else{
               dd.push(y1 + ':' + String(tem));
            }
        }
    };
    return dd
};


var s=lookdeep(myObj,'myObj',false);
for (var x=0; x < s.length; ++x) {
console.log(s[x]+'\n');}

Ergebnis:

["myObj.rrr:undefined",
"myObj.pageURL:BLAH",
"myObj.emailBox.model:emailAddress",
"myObj.emailBox.selector:#emailAddress",
"myObj.passwordBox.model:password",
"myObj.passwordBox.selector:#password",
"myObj.proba.odin.dva:rr",
"myObj.proba.odin.trr:tyuuu",
"myObj.proba.od.ff:5",
"myObj.proba.od.ppa.ooo.lll:lll",
"myObj.proba.od.tyt:12345"]