Bagaimana saya bisa mengulang semua anggota dalam objek JavaScript termasuk nilai-nilai yang merupakan objek.

Misalnya, bagaimana saya bisa mengulanginya (mengakses "nama_Anda" dan "pesan_Anda" untuk masing-masing)?

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

Di bawah ECMAScript 5, Anda dapat menggabungkan Object.keys()dan 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]);

});

Masalahnya dengan ini

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

adalah bahwa Anda juga akan mengulang melalui prototipe objek primitif.

Dengan ini, Anda akan menghindarinya:

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

Dalam ES6 / 2015 Anda dapat mengulangi objek seperti ini: (menggunakan fungsi panah )

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

Di ES7 / 2016 Anda bisa menggunakan dan Object.entriesbukan Object.keysmelalui objek seperti ini:

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

Di atas juga akan berfungsi sebagai satu-liner :

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

jsbin

Jika Anda ingin mengulangi objek bersarang juga, Anda dapat menggunakan fungsi rekursif (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

Sama seperti fungsi di atas, tetapi dengan ES7 Object.entries() bukannya 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.
  });
};

Di sini kita loop melalui objek bersarang mengubah nilai dan mengembalikan objek baru dalam sekali pakai menggunakan Object.entries()dikombinasikan dengan 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.
    })
  );

Menggunakan Underscore.js_.each :

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

Jika Anda menggunakan rekursi, Anda dapat mengembalikan properti objek dari kedalaman apa pun.

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
}

*/

Jawaban ini adalah agregat dari solusi yang disediakan dalam posting ini dengan beberapa umpan balik kinerja . Saya pikir ada 2 use-case dan OP tidak menyebutkan apakah dia perlu mengakses kunci untuk menggunakannya selama proses loop.

I. kunci perlu diakses,

✔ ofdan Object.keyspendekatan

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

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

✔ inpendekatannya

let k;
for (k in obj) {

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

Gunakan yang ini dengan hati-hati, karena dapat mencetak properti prototipe dari obj

✔ pendekatan ES7

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

}

Namun, pada saat edit saya tidak akan merekomendasikan metode ES7, karena JavaScript menginisialisasi banyak variabel secara internal untuk membangun prosedur ini (lihat umpan balik sebagai bukti). Kecuali jika Anda tidak mengembangkan aplikasi besar yang perlu dioptimalkan, maka itu boleh saja tetapi jika optimasi adalah prioritas Anda, Anda harus memikirkannya.

II kita hanya perlu mengakses setiap nilai,

✔ ofdan Object.valuespendekatan

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

}

Umpan balik lebih lanjut tentang tes:

• Caching Object.keysatau Object.valueskinerja dapat diabaikan

Contohnya,

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

• Sebagai Object.valuescontoh, menggunakan forloop asli dengan variabel yang di-cache di Firefox tampaknya sedikit lebih cepat daripada menggunakan for...ofloop. Namun perbedaannya tidak begitu penting dan Chrome berjalan for...oflebih cepat dari forloop asli , jadi saya akan merekomendasikan untuk digunakan for...ofketika berhadapan dengan Object.valueskasus apa pun (tes ke-4 dan ke-6).

• Di Firefox, for...inloopnya sangat lambat, jadi ketika kami ingin men-cache kunci selama iterasi, lebih baik digunakan Object.keys. Plus Chrome menjalankan kedua struktur dengan kecepatan yang sama (tes 1 dan terakhir).

Anda dapat memeriksa tes di sini: https://jsperf.com/es7-and-misc-loops

Saya tahu ini terlambat, tetapi saya butuh waktu 2 menit untuk menulis versi AgileJon yang dioptimalkan dan diperbaiki ini:

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 adalah nilainya

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

ATAU

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

Di ES7 Anda dapat melakukan:

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'
    }
}

Beberapa cara untuk melakukan itu ...

1) 2 lapisan untuk ... dalam lingkaran ...

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

2) MenggunakanObject.key

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

3) Fungsi rekursif

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

Dan menyebutnya seperti:

recursiveObj(validation_messages);

Di sinilah versi perbaikan dan rekursif dari solusi AgileJon ( 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);

Solusi ini bekerja untuk semua jenis kedalaman yang berbeda.

Pilihan lain:

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

ECMAScript-2017, baru saja selesai sebulan lalu, memperkenalkan Object.values ​​(). Jadi sekarang Anda bisa melakukan ini:

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

Saya pikir itu layak menunjukkan bahwa jQuery menyelesaikan masalah ini dengan baik $.each().

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

Sebagai contoh:

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

$(this)menjadi item tunggal di dalam objek. Tukar $('.foo')ke variabel jika Anda tidak ingin menggunakan mesin pemilih jQuery.

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

Untuk mengulang melalui objek JavaScript kita dapat menggunakan forEach dan untuk mengoptimalkan kode kita dapat menggunakan fungsi panah

Saya tidak bisa mendapatkan posting di atas untuk melakukan apa yang saya inginkan.

Setelah bermain-main dengan balasan lain di sini, saya membuat ini. Ini hacky, tetapi berhasil!

Untuk objek ini:

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

... kode ini:

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

... menghasilkan ini di konsol:

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

Solusi yang bekerja untuk saya adalah sebagai berikut

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

Eksotis satu - melintasi mendalam

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

  // ... your code

  return value;
})

Dalam solusi ini kami menggunakan replacer yang memungkinkan untuk melintasi seluruh objek dan objek bersarang - pada setiap level Anda akan mendapatkan semua bidang dan nilai. Jika Anda perlu mendapatkan path lengkap ke setiap bidang, lihat di sini

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

Dalam kasus saya (atas dasar sebelumnya) dimungkinkan sejumlah tingkat.

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

hasil:

["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"]