How to loop through a plain JavaScript object with the objects as members

Question

How can I loop through all members in a JavaScript object including values that are objects   For example  how could I loop through this  accessing the  your name  and  your message  for each    var validation messages          key 1              your name    jimmy            your msg    hello world              key 2              your name    billy            your msg    foo equals bar

User · Answer

in 2020 you want immutable and universal functions

This walk through your multidimensional object composed of sub-objects, arrays and string and apply a custom function

export const iterate = (object, func) => {
  const entries = Object.entries(object).map(([key, value]) =>
    Array.isArray(value)
      ? [key, value.map(e => iterate(e, func))]
      : typeof value === 'object'
      ? [key, iterate(value, func)]
      : [key, func(value)]
  );
  return Object.fromEntries(entries);
};

usage:

const r = iterate(data, e=>'converted_'+e);
console.log(r);

User · Answer

forEach2   found here    var lunch         sandwich   ham       age  48     lunch forEach2 function  item  key        console log key       console log item        Code  if   Object prototype forEach2        Object defineProperty Object prototype   forEach2             value  function  callback  thisArg                if  this    null                    throw new TypeError  Not an object                              thisArg   thisArg    window              for  var key in this                    if  this hasOwnProperty key                         callback call thisArg  this key   key  this

User · Answer

I couldn t get the above posts to do quite what I was after   After playing around with the other replies here  I made this  It s hacky  but it works   For this object   var myObj         pageURL       BLAH       emailBox      model  emailAddress   selector   emailAddress        passwordBox   model  password       selector   password            this 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  lt  objectItems length    x        console log objectItems x  item           objectItems x  value           produces this in the console   myObj pageURL   BLAH myObj emailBox model   emailAddress myObj emailBox selector    emailAddress myObj passwordBox model   password myObj passwordBox selector    password

User · Answer

The problem with this  for  var key in validation messages       var obj   validation messages key      for  var prop in obj          alert prop           obj prop             is that you   ll also loop through the primitive object s prototype   With this one you will avoid it   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

User · Answer

The solution that work for me is the following   private convertParams function params       var params          Object keys values  forEach function key            params push   id  key  option   Igual   value  params key  id               return params

User · Answer

In ES6 2015 you can loop through an object like this   using arrow function  Object keys myObj  forEach key   gt      console log key             the name of the current key    console log myObj key       the value of the current key       jsbin In ES7 2016 you can use Object entries instead of Object keys and loop through an object like this  Object entries myObj  forEach   key  val     gt      console log key      the name of the current key    console log val      the value of the current key       The above would also work as a one-liner  Object entries myObj  forEach   key  val     gt  console log key  val     jsbin In case you want to loop through nested objects as well  you can use a recursive function  ES6   const loopNestedObj   obj   gt      Object keys obj  forEach key   gt        if  obj key   amp  amp  typeof obj key       quot object quot   loopNestedObj obj key       recurse      else console log key  obj key       or do something with key and val            jsbin Same as function above  but with ES7 Object entries   instead of Object keys    const loopNestedObj   obj   gt      Object entries obj  forEach   key  val     gt        if  val  amp  amp  typeof val      quot object quot   loopNestedObj val      recurse      else console log key  val      or do something with key and val            Here we loop through nested objects change values and return a new object in one go using Object entries   combined with Object fromEntries    ES10 2019   const loopNestedObj   obj   gt    Object fromEntries      Object entries obj  map   key  val     gt          if  val  amp  amp  typeof val      quot object quot    key  loopNestedObj val       recurse       else  key  updateMyVal val       or do something with key and val               Another way of looping through objects is by using  for     in and for     of  See  vdegenne s nicely written answer

User · Answer

In ES7 you can do   for  const  key  value  of Object entries obj

User · Answer

p is the value  for  var key in p      alert key       gt      p key        OR   Object keys p  forEach key   gt    console log key  p key

User · Answer

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

User · Answer

Exotic one - deep traverse JSON stringify validation messages  field value   gt     if  field  return value              your code      return value      In this solution we use replacer which allows to deep traverse whole object and nested objects - on each level you will get all fields and values  If you need to get full path to each field look here  x000D   x000D  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   gt     if  field  return value       console log  key    field padEnd 11   - value    value          return value     x000D   x000D   x000D

User · Answer

for var key in validation messages       for var subkey in validation messages key              code here           subkey being value  key being  yourname     yourmsg

User · Answer

for var k in validation messages        var o   validation messages k       do something with o your name       do something else with o your msg

User · Answer

Using ES8 Object entries   should be a more compact way to achieve this   Object entries validation messages  map   key object     gt         alert  Looping through key     key          Object entries object  map   token  value     gt            alert    token      value

User · Answer

This answer is an aggregate of the solutions that were provided in this   post with some performance   feedbacks  I think there is 2   use-cases and the OP didn t mention if he needs to access the keys in order use them   during the loop process    I  the keys need to be accessed     the of and Object keys approach  let k  for  k of Object keys obj                    k   key          obj k    value               the in approach  let k  for  k in obj                   k   key          obj k    value             Use this one with cautious  as it could print prototype d properties of obj    the ES7 approach  for  const  key  value  of Object entries obj          However  at the time of the edit I wouldn t recommend the ES7 method  because JavaScript initializes a lot of variables internally to build this procedure  see the feedbacks for proof   Unless you are not developing a huge app which deserves optimization  then it is ok but if optimization is your priority you should think about it   II   we just need to access each values     the of and Object values approach  let v  for  v of Object values obj            More feedbacks about the tests     Caching Object keys or Object values performance is negligible   For instance    const keys   Object keys obj   let i  for  i of keys              same as for  i of Object keys obj               For Object values case  using a native for loop with cached variables in Firefox seems to be a little faster than using a for   of loop  However the difference is not that important and Chrome is running for   of faster than native for loop  so I would recommend to use for   of when dealing with Object values in any cases  4th and 6th tests   In Firefox  the for   in loop is really slow  so when we want to cache the key during the iteration it is better to use Object keys  Plus Chrome is running both structure at equal speed  1st and last tests          You can check the tests here     https   jsperf com es7-and-misc-loops

User · Answer

Using Underscore js   s   each     each validation messages  function value  key         each value  function value  key           console log value

User · Answer

Here comes the improved and recursive version of AgileJon s solution  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     This solution works for all kinds of different depths

User · Answer

Few ways to do that      1  2 layers for   in loop     for  let key in validation messages       const vmKeys   validation messages key      for  let vmKey in vmKeys          console log vmKey   vmKeys vmKey             2  Using Object key  Object keys validation messages  forEach key   gt       const vmKeys   validation messages key      Object keys vmKeys  forEach key   gt        console log vmKeys   vmKeys key                 3  Recursive function  const recursiveObj   obj   gt      for let key in obj       if  obj hasOwnProperty key   continue       if typeof obj key       object          console log key   obj key          else         recursiveObj obj key                  And call it like   recursiveObj validation messages

User · Answer

In my case  on the basis of the preceding  is possible any number of levels   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  amp  amp  typeof tem   object                   a1 arguments callee tem p Name true                  if a1  amp  amp  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  lt  s length    x    console log s x    n       result     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

User · Answer

I know it s waaay late  but it did take me 2 minutes to write this optimized and improved version of AgileJon s answer   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

User · Answer

Another option   var testObj    test  true  test1  false   for let x of Object keys testObj        console log x

User · Answer

I think it s worth pointing out that jQuery sorts this out nicely with   each    See   each   Example      foo   each function         console log   this           this  being the single item inside the object  Swap     foo   to a variable if you don t want to use jQuery s selector engine

User · Answer

ECMAScript-2017  just finalized a month ago  introduces Object values    So now you can do this   let v  for  v of Object values validation messages      console log v your name        jimmy billy

User · Answer

x000D   x000D  var obj   x000D  name  SanD   x000D  age  27  x000D    x000D  Object keys obj  forEach  key   gt console log key obj key     x000D   x000D   x000D    To loop through JavaScript Object we can use forEach and to optimize code we can use arrow function

User · Answer

If you use recursion you can return object properties of any depth-  function lookdeep object       var collection      index  0  next  item      for item in object           if object hasOwnProperty item                next  object item               if typeof next    object   amp  amp  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

User · Answer

Under ECMAScript 5  you can combine Object keys   and Array prototype forEach      x000D   x000D  var obj     x000D    first   John   x000D    last   Doe  x000D     x000D   x000D     x000D     Visit non-inherited enumerable keys x000D     x000D  Object keys obj  forEach function key    x000D   x000D    console log key  obj key    x000D   x000D      x000D   x000D   x000D

[javascript] How to loop through a plain JavaScript object with the objects as members?

in 2020 you want immutable and universal functions

Examples related to javascript