How do I loop through or enumerate a JavaScript object

Question

I have a JavaScript object like the following   var p          p1    value1        p2    value2        p3    value3       Now I want to loop through all p elements  p1  p2  p3     And get their keys and values  How can I do that   I can modify the JavaScript object if necessary  My ultimate goal is to loop through some key value pairs and if possible I want to avoid using eval

User · Answer

single level indent
single set of brackets
highest browser compatibility
hasOwnProperty safe

_x000D_

var p = {"p1": "value1", "p2": "value2", "p3": "value3"};_x000D_
_x000D_
for (var key in p) if (p.hasOwnProperty(key)) {_x000D_
  var value = p[key];_x000D_
  console.log(key, value);_x000D_
}

_x000D_

User · Answer

In ES6 we have well-known symbols to expose some previously internal methods  you can use it to define how iterators work for this object   var p          p1    value1        p2    value2        p3    value3         Symbol iterator              yield  Object keys this                 p      p1    p2    p3     this will give the same result as using for   in es6 loop   for var key in p        console log key       But its important to know the capabilities you now have using es6

User · Answer

x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D   x000D  for  var key in p    x000D      if  p hasOwnProperty key     x000D          console log key           p key    x000D        x000D    x000D   lt p gt  x000D    Output  lt br gt  x000D    p1   values1 lt br gt  x000D    p2   values2 lt br gt  x000D    p3   values3 x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Preface    Object properties can be own  the property is on the object itself  or inherited  not on the object itself  on one of its prototypes   Object properties can be enumerable or non-enumerable  Non-enumerable properties are left out of lots of property enumerations arrays  Property names can be strings or Symbols  Properties whose names are Symbols are left out of lots of property enumerations arrays    Here in 2018  your options for looping through an object s properties are  some examples follow the list     for-in  MDN  spec   mdash  A loop structure that loops through the names of an object s enumerable properties  including inherited ones  whose names are strings Object keys  MDN  spec   mdash  A function providing an array of the names of an object s own  enumerable properties whose names are strings  Object values  MDN  spec   mdash  A function providing an array of the values of an object s own  enumerable properties  Object entries  MDN  spec   mdash  A function providing an array of the names and values of an object s own  enumerable properties  each entry in the array is a  name  value  array   Object getOwnPropertyNames  MDN  spec   mdash  A function providing an array of the names of an object s own properties  even non-enumerable ones  whose names are strings  Object getOwnPropertySymbols  MDN  spec   mdash  A function providing an array of the names of an object s own properties  even non-enumerable ones  whose names are Symbols  Reflect ownKeys  MDN  spec   mdash  A function providing an array of the names of an object s own properties  even non-enumerable ones   whether those names are strings or Symbols  If you want all of an object s properties  including non-enumerable inherited ones  you need to use a loop and Object getPrototypeOf  MDN  spec  and use Object getOwnPropertyNames  Object getOwnPropertySymbols  or Reflect ownKeys on each object in the prototype chain  example at the bottom of this answer     With all of them except for-in  you d use some kind of looping construct on the array  for  for-of  forEach  etc     Examples   for-in    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const name in o    x000D      const value   o name   x000D      console log    name      value     x000D    x000D   x000D   x000D    Object keys  with a for-of loop  but you can use any looping construct     x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const name of Object keys o     x000D      const value   o name   x000D      console log    name      value     x000D    x000D   x000D   x000D    Object values    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const value of Object values o     x000D      console log    value     x000D    x000D   x000D   x000D    Object entries    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const  name  value  of Object entries o     x000D      console log    name      value     x000D    x000D   x000D   x000D    Object getOwnPropertyNames    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const name of Object getOwnPropertyNames o     x000D      const value   o name   x000D      console log    name      value     x000D    x000D   x000D   x000D    Object getOwnPropertySymbols    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const name of Object getOwnPropertySymbols o     x000D      const value   o name   x000D      console log    String name       value     x000D    x000D   x000D   x000D    Reflect ownKeys    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  const name of Reflect ownKeys o     x000D      const value   o name   x000D      console log    String name       value     x000D    x000D   x000D   x000D    All properties  including inherited non-enumerable ones    x000D   x000D     A prototype object to inherit from  with a string-named property x000D  const p    answer  42   x000D     The object we ll look at  which inherits from  p  x000D  const o   Object create p   x000D     A string-named property x000D  o question    Life  the Universe  and Everything   x000D     A symbol-named property x000D  o Symbol  author       Douglas Adams   x000D  for  let depth   0  current   o  current    depth  current   Object getPrototypeOf current     x000D      for  const name of Reflect ownKeys current     x000D          const value   o name   x000D          console log     depth     String name       String value      x000D        x000D    x000D   as-console-wrapper   x000D    max-height  100   important  x000D    x000D   x000D   x000D

User · Answer

If you want to iterate over non-enumerable properties as well  you can use Object getOwnPropertyNames obj  to return an array of all properties  enumerable or not  found directly upon a given object    x000D   x000D  var obj   Object create       x000D       non-enumerable property x000D    getFoo    x000D      value  function     return this foo     x000D      enumerable  false x000D      x000D      x000D   x000D  obj foo   1     enumerable property x000D   x000D  Object getOwnPropertyNames obj  forEach function  name    x000D    document write name          obj name      lt br  gt     x000D      x000D   x000D   x000D

User · Answer

Only JavaScript code without dependencies   var p     p1    value1    p2    value2    p3    value3    keys   Object keys p          p1    p2    p3    for i   0  i  lt  keys length  i       console log keys i          p keys i          p1 value1  p2 value2  p3 value3

User · Answer

The question won t be complete if we don t mention about alternative methods for looping through objects   Nowadays many well known JavaScript libraries provide their own methods for iterating over collections  i e  over arrays  objects  and array-like objects  These methods are convenient to use and are entirely compatible with any browser    If you work with jQuery  you may use jQuery each   method  It can be used to seamlessly iterate over both objects and arrays     each obj  function key  value        console log key  value        In Underscore js you can find method   each    which iterates over a list of elements  yielding each in turn to a supplied function  pay attention to the order of arguments in iteratee function       each obj  function value  key        console log key  value        Lo-Dash provides several methods for iterating over object properties  Basic   forEach    or it s alias   each    is useful for looping through both objects and arrays  however     objects with length property are treated like arrays  and to avoid this behavior it is suggested to use   forIn   and   forOwn   methods  these also have value argument coming first      forIn obj  function value  key        console log key  value           forIn   iterates over own and inherited enumerable properties of an object  while   forOwn   iterates only over own properties of an object  basically checking against hasOwnProperty function   For simple objects and object literals any of these methods will work fine    Generally all described methods have the same behaviour with any supplied objects  Besides using native for  in loop will usually be faster than any abstraction  such as jQuery each    these methods are considerably easier to use  require less coding and provide better error handling

User · Answer

An object becomes an iterator when it implements the  next   method  x000D   x000D  const james       name   James     height   5 10      weight  185      Symbol iterator          let properties          for  let key of Object keys james           properties push key              index   0      return         next       gt            let key   properties index           let value   this key           let done   index  gt   properties length - 1          index            return             key            value            done                                     const iterator   james Symbol iterator      console log iterator next   value       James  console log iterator next   value       5 10  console log iterator next   value      185 x000D   x000D   x000D

User · Answer

This is how to loop through a javascript object and put the data into a table   x000D   x000D   lt body gt  x000D   lt script gt  x000D  function createTable objectArray  fields  fieldTitles    x000D    let body   document getElementsByTagName  body   0   x000D    let tbl   document createElement  table    x000D    let thead   document createElement  thead    x000D    let thr   document createElement  tr    x000D   x000D    for  p in objectArray 0    x000D      let th   document createElement  th    x000D      th appendChild document createTextNode p    x000D      thr appendChild th   x000D       x000D      x000D    x000D    thead appendChild thr   x000D    tbl appendChild thead   x000D   x000D    let tbdy   document createElement  tbody    x000D    let tr   document createElement  tr    x000D    objectArray forEach  object    gt    x000D      let n   0  x000D      let tr   document createElement  tr    x000D      for  p in objectArray 0    x000D        var td   document createElement  td    x000D        td appendChild document createTextNode object p     x000D        tr appendChild td   x000D        n    x000D         x000D      tbdy appendChild tr       x000D        x000D    tbl appendChild tbdy   x000D    body appendChild tbl  x000D    return tbl  x000D    x000D   x000D  createTable   x000D                 name   Banana   price   3 04       k 0  x000D                 name   Orange   price   2 56        k 1  x000D                 name   Apple   price   1 45   x000D                x000D   lt  script gt  x000D   x000D   x000D

User · Answer

Since es2015 is getting more and more popular I am posting this answer which include usage of generator and iterator to smoothly iterate through  key  value  pairs  As it is possible in other languages for instance Ruby  Ok here is a code   x000D   x000D  const MyObject        a    Hello      b    it  s      c    me      d    you      e    looking      f    for      Symbol iterator   function          for  const i of Object keys this           yield  i  this i                  for  const  k  v  of MyObject      console log  Here is key   k  and here is value   v       x000D   x000D   x000D   All information about how can you do an iterator and generator you can find at developer Mozilla page  Hope It helped someone  EDIT  ES2017 will include Object entries which will make iterating over  key  value  pairs in objects even more easier  It is now known that it will be a part of a standard according to the ts39 stage information  I think it is time to update my answer to let it became even more fresher than it s now   x000D   x000D  const MyObject        a    Hello      b    it  s      c    me      d    you      e    looking      f    for       for  const  k  v  of Object entries MyObject       console log  Here is key   k  and here is value   v       x000D   x000D   x000D   You can find more about usage on MDN page

User · Answer

I would do this rather than checking obj hasOwnerProperty within every for     in loop   var obj    a   1   for var key in obj         obj hasOwnProperty key  is not needed      console log key       then check if anybody has messed the native object  Put this code at the end of the page  for var key in Object       throw new Error  Please don t extend the native object

User · Answer

for key in p      alert  p key         Note  you can do this over arrays  but you ll iterate over the length and other properties  too

User · Answer

Multiple way to iterate object in javascript  Using for   in loop   x000D   x000D   var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D  for  let key in p   x000D     if p hasOwnProperty key    x000D       console log    key      p key     x000D       x000D    x000D   x000D   x000D    Using for   of loop   x000D   x000D   var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D  for  let key of Object keys p    x000D       console log  key    key   amp  value    p key     x000D    x000D   x000D   x000D    Using forEach   with Object keys  Object values  Object entries   x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D  Object keys p  forEach key  gt   x000D     console log    key      p key      x000D      x000D  Object values p  forEach value  gt   x000D     console log value   x000D      x000D  Object entries p  forEach   key value    gt   x000D      console log    key    value    x000D     x000D   x000D   x000D

User · Answer

After looking through all the answers in here  hasOwnProperty isn t required for my own usage because my json object is clean  there s really no sense in adding any additional javascript processing  This is all I m using   for  var key in p        console log key       gt      p key           key is key        value is p key

User · Answer

Object entries   function    x000D   x000D  var p     x000D        p1    value1   x000D        p2    value2   x000D        p3    value3  x000D      x000D   x000D  for  var i in Object entries p    x000D   var key   Object entries p  i  0   x000D   var value   Object entries p  i  1   x000D   console log  key   i      key      value   i      value   x000D    x000D   x000D   x000D

User · Answer

since ES06 you can get the values of an object as array with  let arrValues   Object values  yourObject      it return the an array of the object values and it not extract values from Prototype    MDN DOCS Object values    and for keys   allready answerd before me here     let arrKeys     Object keys yourObject

User · Answer

If your application is in string creation  a nice combination is with Object keys  implode and the  map array method  For example  if we have a json object like   var data         key1  10      key2   someString       key3  3000        and we d like to generate   The values are key1   10  key2   someString  key3   3000    We can accomplish this in the single line of code   var str    The values are   implode       Object keys data  map function key  return    key      data key             Implode collapses an array to a string with a delimiter  first argument  inserted between elements   map iterates through an array returning an array  and Object keys has been elaborated quite well by the other answers

User · Answer

Here is another method to iterate through an object    x000D   x000D     var p     x000D   p1    value1   x000D   p2    value2   x000D   p3    value3  x000D     x000D   x000D   x000D  Object keys p  forEach key   gt    console log key  p key      x000D   x000D   x000D

User · Answer

If anybody needs to loop through arrayObjects with condition    x000D   x000D  var arrayObjects      building   A    status   good     building   B   status   horrible     x000D   x000D  for  var i 0  i lt  arrayObjects length  i      x000D    console log arrayObjects i    x000D     x000D    for key in arrayObjects i           x000D       x000D        if  key     status   amp  amp  arrayObjects i  key      good     x000D           x000D            console log key    - gt     arrayObjects i  key    x000D         else  x000D            console log  nothing found    x000D          x000D       x000D    x000D   x000D   x000D

User · Answer

You can use the for-in loop as shown by others  However  you also have to make sure that the key you get is an actual property of an object  and doesn t come from the prototype   Here is the snippet   x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D   x000D  for  var key in p    x000D      if  p hasOwnProperty key     x000D          console log key     - gt      p key    x000D        x000D    x000D   x000D   x000D    For-of with Object keys   alternative    x000D   x000D  var p     x000D      0   value1   x000D       b    value2   x000D      key   value3  x000D     x000D   x000D  for  var key of Object keys p     x000D      console log key     - gt      p key   x000D    x000D   x000D   x000D    Notice the use of for-of instead of for-in  if not used it will return undefined on named properties  and Object keys   ensures the use of only the object s own properties without the whole prototype-chain properties  Using the new Object entries   method   Note  This method is not supported natively by Internet Explorer  You may consider using a Polyfill for older browsers   const p          p1    value1        p2    value2        p3    value3      for  let  key  value  of Object entries p       console log    key     value

User · Answer

If you want to iterate only over properties use one of the answers above  however if you want to iterate over everything including functions  then you might want to use Object getOwnPropertyNames obj    x000D   x000D  for  let o of Object getOwnPropertyNames Math     x000D    console log o   x000D    x000D   x000D   x000D    I sometimes use this to fast test all functions on objects with simple inputs and outputs

User · Answer

You have to use the for-in loop  But be very careful when using this kind of loop  because this will loop all the properties along the prototype chain   Therefore  when using for-in loops  always make use of the hasOwnProperty method to determine if the current property in iteration is really a property of the object you re checking on   for  var prop in p        if   p hasOwnProperty prop               The current property is not a direct property of p         continue              Do your logic with the property here

User · Answer

Loops can be pretty interesting when using pure JavaScript  It seems that only ECMA6  New 2015 JavaScript specification  got the loops under control  Unfortunately as I m writing this  both Browsers and popular Integrated development environment  IDE  are still struggling to support completely the new bells and whistles   At a glance here is what a JavaScript object loop look like before ECMA6   for  var key in object      if  p hasOwnProperty key         var value   object key       console log key      This is the key      console log value      This is the value          Also  I know this is out of scope with this question but in 2011  ECMAScript 5 1 added the forEach method for Arrays only which basically created a new improved way to loop through arrays while still leaving non iterable objects with the old verbose and confusing for loop  But the odd part is that this new forEach method does not support break which led to all sorts of other problems   Basically in 2011  there is not a real solid way to loop in JavaScript other than what many popular libraries  jQuery  Underscore  etc   decided to re-implement   As of 2015  we now have a better out of the box way to loop  and break  any object type  including Arrays and Strings   Here is what a loop in JavaScript will eventually look like when the recommendation becomes mainstream   for  let  key  value  of Object entries object         console log key      This is the key      console log value      This is the value      Note that most browsers won t support the code above as of June 18th 2016  Even in Chrome you need to enable this special flag for it to work  chrome   flags  enable-javascript-harmony  Until this becomes the new standard  the old method can still be used but there are also alternatives in popular libraries or even lightweight alternatives for those who aren t using any of these libraries

User · Answer

I had a similar problem when using Angular  here is the solution that I ve found   Step 1  Get all the object keys  using Object keys  This method returns an array of a given object   s own enumerable properties   Step 2  Create an empty array  This is an where all the properties are going to live  since your new ngFor loop is going to point to this array  we gotta catch them all  Step 3  Iterate throw all keys  and push each one into the array you created  Here   s how that looks like in code          Evil response in a variable  Here are all my vehicles  let evilResponse         car                    color     red           model     2013             motorcycle                   color     red           model     2016             bicycle                   color     red           model     2011             Step 1  Get all the object keys  let evilResponseProps   Object keys evilResponse      Step 2  Create an empty array  let goodResponse          Step 3  Iterate throw all keys  for  prop of evilResponseProps         goodResponse push evilResponseProps prop        Here is a link to the original post  https   medium com  papaponmx looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

User · Answer

It s interesting people in these answers have touched on both Object keys   and for   of but never combined them     var map    well  hello   there       for  let key of Object keys map       console log key         map key      You can t just for   of an Object because it s not an iterator  and for   index or  forEach  ing the Object keys   is ugly inefficient  I m glad most people are refraining from for   in  with or without checking  hasOwnProperty    as that s also a bit messy  so other than my answer above  I m here to say       You can make ordinary object associations iterate  Behaving just like Maps with direct use of the fancy for   of DEMO working in Chrome and FF  I assume ES6 only   var ordinaryObject    well  hello   there       for  let pair of ordinaryObject        key value     console log pair 0          pair 1       or for  let  key  value  of ordinaryObject      console log key         value     So long as you include my shim below     makes all objects iterable just like Maps    YAY   iterates over Object keys    which already ignores prototype chain for us  Object prototype Symbol iterator    function         var keys   Object keys this  Symbol iterator         var obj   this      var output      return  next function             if    output   keys next    done              output value    output value  obj output value            return output               Without having to create a real Map object that doesn t have the nice syntactic sugar   var trueMap   new Map    well    hello      there           for  let pair of trueMap      console log pair 0          pair 1      In fact  with this shim  if you still wanted to take advantage of Map s other functionality  without shimming them all in  but still wanted to use the neat object notation  since objects are now iterable you can now just make a Map from it     shown in demo var realMap   new Map  well  hello   there            For those who don t like to shim  or mess with prototype in general  feel free to make the function on window instead  calling it something like getObjIterator   then     no prototype manipulation function getObjIterator obj          create a dummy object instead of adding functionality to all objects     var iterator   new Object           give it what the shim does but as its own local property     iterator Symbol iterator    function             var keys   Object keys obj  Symbol iterator             var output           return  next function                 if    output   keys next    done                  output value    output value  obj output value                return output                          return iterator      Now you can just call it as an ordinary function  nothing else is affected  var realMap   new Map getObjIterator  well  hello   there          or  for  let pair of getObjIterator ordinaryObject     There s no reason why that wouldn t work   Welcome to the future

User · Answer

The Object keys   method returns an array of a given object s own enumerable properties  Read more about it here   x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D   x000D  Object keys p  map  key   gt  console log key    - gt     p key    x000D   x000D   x000D

User · Answer

In ECMAScript 5 you have new approach in iteration fields of literal - Object keys  More information you can see on MDN  My choice is below as a faster solution in current versions of browsers  Chrome30  IE10  FF25   var keys   Object keys p       len   keys length      i   0      prop      value  while  i  lt  len        prop   keys i       value   p prop       i    1      You can compare performance of this approach with different implementations on jsperf com    Extend Implementations Object keys iteration object literal iteration   Browser support you can see on Kangax s compat table  For old browser you have simple and full polyfill  UPD   performance comparison for all most popular cases in this question on perfjs info   object literal iteration

User · Answer

You can just iterate over it like   for  var key in p      alert p key        Note that key will not take on the value of the property  it s just an index value

User · Answer

In latest ES script  you can do something like this    x000D   x000D  let p    foo   bar    x000D  for  let  key  value  of Object entries p     x000D    console log key  value   x000D    x000D   x000D   x000D

User · Answer

Object keys obj    Array      retrieves all string-valued keys of all enumerable own  non-inherited  properties    So it gives the same list of keys as you intend by testing each object key with hasOwnProperty  You don t need that extra test operation than and Object keys  obj   forEach function  key      is supposed to be faster  Let s prove it    x000D   x000D  var uniqid   function    x000D     var text       x000D       i   0  x000D       possible    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz   x000D     for    i  lt  32  i       x000D       text    possible charAt  Math floor  Math random     possible length      x000D       x000D     return text  x000D        x000D    CYCLES   100000  x000D    obj        x000D    p1  x000D    p2  x000D    p3  x000D    key  x000D   x000D     Populate object with random properties x000D  Array apply  null  Array  CYCLES     forEach function    x000D   obj  uniqid       new Date   x000D      x000D   x000D     Approach  1 x000D  p1   performance now    x000D  Object keys  obj   forEach function  key    x000D   var waste   obj  key    x000D      x000D   x000D  p2   performance now    x000D  console log   Object keys approach took      p2 - p1      milliseconds     x000D   x000D     Approach  2 x000D  for  key in obj     x000D   if   obj hasOwnProperty  key       x000D    var waste   obj  key    x000D     x000D    x000D   x000D  p3   performance now    x000D  console log   for   in hasOwnProperty approach took      p3 - p2      milliseconds     x000D   x000D   x000D    In my Firefox I have following results   Object keys approach took 40 21101451665163 milliseconds  for   in hasOwnProperty approach took 98 26163508463651 milliseconds    PS  on Chrome the difference even bigger http   codepen io dsheiko pen JdrqXa  PS2  In ES6  EcmaScript 2015  you can iterate iterable object nicer     x000D   x000D  let map   new Map   set  a   1  set  b   2   x000D  for  let pair of map    x000D      console log pair   x000D    x000D   x000D     OR  x000D  let map   new Map   x000D       false   no    x000D       true    yes    x000D      x000D  map forEach  value  key    gt    x000D      console log key  value   x000D      x000D   x000D   x000D

User · Answer

Using a for-of on Object keys   Like   x000D   x000D  let object        key1    value1      key2    value2      key3    value3      for  let key of Object keys object       console log key           object key     x000D   x000D   x000D

User · Answer

A good way for looping on an enumerable JavaScript object which could be awesome and common for ReactJS is using Object keys or Object entries with using map function  like below      assume items   const items       first    name   phone   price  400      second    name   tv   price  300      third    name   sofa   price  250         For looping and show some UI on ReactJS act like below        lt div gt     Object entries items  map   key     name  price        gt         lt div key  key  gt        lt span gt name   name  lt  span gt        lt span gt price   price  lt  span gt       lt  div gt         lt  div gt    Actually  I use the destructuring assignment twice  once for getting key once for getting name and price

User · Answer

Under ECMAScript 5  you can combine Object keys   and Array prototype forEach     var obj     first   John   last   Doe      Object keys obj  forEach function key        console log key  obj key          ECMAScript 6 adds for   of   for  const key of Object keys obj         console log key  obj key        ECMAScript 8 adds Object entries   which avoids having to look up each value in the original object   Object entries obj  forEach        key  value     gt  console log key  value       You can combine for   of  destructuring  and Object entries   for  const  key  value  of Object entries obj         console log key  value       Both Object keys   and Object entries   iterate properties in the same order as a for   in loop but ignore the prototype chain  Only the object s own enumerable properties are iterated

User · Answer

You can also use Object keys   and iterate over the object keys like below to get the value    x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D   x000D  Object keys p  forEach  key   gt    x000D   console log key    - gt     p key    x000D      x000D   x000D   x000D

User · Answer

Considering ES6 I d like to add my own spoon of sugar and provide one more approach to iterate over object s properties   Since plain JS object isn t iterable just out of box  we aren t able to use for  of loop for iterating over its content  But no one can stop us to make it iterable   Let s we have book object   let book       title   Amazing book     author   Me     pages  3    book Symbol iterator    function       let properties   Object keys this      returns an array with property names   let counter   0    let isDone   false     let next        gt        if counter  gt   properties length         isDone   true            return   done  isDone  value  this properties counter              return   next        Since we ve made it we can use it this way   for let pValue of book     console log pValue     ------------------------ Amazing book Me 3   Or if you know the power of ES6 generators  so you certainly can make the code above much shorter   book Symbol iterator    function         let properties   Object keys this     for  let p of properties       yield this p            Sure  you can apply such behavior for all objects with making Object iterable on prototype level   Object prototype Symbol iterator    function           Also  objects that comply with the iterable protocol can be used with the new ES2015 feature spread operator thus we can read object property values as an array   let pValues       book   console log pValues   -------------------------   Amazing book    Me   3    Or you can use destructuring assignment   let  title    pages    book     notice that we can just skip unnecessary values console log title   console log pages   ------------------ Amazing book 3   You can check out JSFiddle with all code I ve provided above

User · Answer

via prototype with forEach   which should skip the prototype chain properties   Object prototype each   function f        var obj   this     Object keys obj  forEach  function key             f  key   obj key                   print all keys and values var obj    a 1 b 2 c 3  obj each function key value    console log key         value         a 1    b 2    c 3

User · Answer

x000D   x000D      var p     username   ordermanageadmin   user id   2   resource id   Magento Sales  actions    x000D    username   ordermanageadmin 1   user id   3   resource id   Magento Sales  actions    x000D  for var value in p    x000D      for  var key in value    x000D          if  p hasOwnProperty key     x000D              console log key     - gt      p key    x000D            x000D        x000D    x000D   x000D   x000D

User · Answer

Besause the asker s   ultimate goal is to loop through some key value pairs   and finally don t looking for a loop   var p    p1   value1   p2   value2   p3   value3    if  p1  in p     var val p  p1

User · Answer

Since ES2015 you can use the for of loop  to access the element directly      before ES2015 for var key of elements     console log elements key           ES2015 for let element of elements     console log element       Hope this helps someone

User · Answer

Performance  Today 2020 03 06 I perform tests of chosen solutions on Chrome v80 0  Safari v13 0 5 and Firefox 73 0 1 on MacOs High Sierra v10 13 6  Conclusions   solutions based on for-in  A B  are fast  or fastest  for all browsers for big and small objects surprisingly for-of  H  solution is fast on chrome for small and big objects solutions based on explicit index i  J K  are quite fast on all browsers for small objects  for firefox also fast for big ojbects but medium fast on other browsers  solutions based on iterators  D E  are slowest and not recommended solution C is slow for big objects and medium-slow for small objects     Details  Performance tests was performed for    small object - with 3 fields - you can perform test on your machine HERE  big  object - with 1000 fields - you can perform test on your machine HERE   Below snippets presents used solutions   x000D   x000D  function A obj s       x000D   for  let key in obj  if  obj hasOwnProperty key   s  key  - gt   obj key         x000D    return s  x000D    x000D   x000D  function B obj s       x000D   for  let key in obj  s  key  - gt   obj key         x000D    return s  x000D    x000D   x000D  function C obj s       x000D    const map   new Map Object entries obj    x000D   for  let  key value  of map  s  key  - gt   value        x000D    return s  x000D    x000D   x000D  function D obj s       x000D    let o      x000D         obj  x000D        Symbol iterator      x000D        for  const i of Object keys this   yield  i  this i        x000D        x000D      x000D    for  let  key value  of o  s  key  - gt   value        x000D    return s  x000D    x000D   x000D  function E obj s       x000D    let o      x000D         obj  x000D        Symbol iterator     yield  Object keys this   x000D      x000D    for  let key of o  s  key  - gt   o key         x000D    return s  x000D    x000D   x000D  function F obj s       x000D   for  let key of Object keys obj   s  key  - gt   obj key       x000D    return s  x000D    x000D   x000D  function G obj s       x000D   for  let  key  value  of Object entries obj   s  key  - gt   value      x000D    return s  x000D    x000D   x000D  function H obj s       x000D   for  let key of Object getOwnPropertyNames obj   s  key  - gt   obj key       x000D    return s  x000D    x000D   x000D  function I obj s       x000D   for  const key of Reflect ownKeys obj   s  key  - gt   obj key       x000D    return s  x000D    x000D   x000D  function J obj s       x000D    let keys   Object keys obj   x000D   for let i   0  i  lt  keys length  i     x000D      let key   keys i   x000D      s  key  - gt   obj key       x000D      x000D    return s  x000D    x000D   x000D  function K obj s       x000D    var keys   Object keys obj   len   keys length  i   0  x000D    while  i  lt  len    x000D      let key   keys i   x000D      s  key  - gt   obj key       x000D      i    1  x000D      x000D    return s  x000D    x000D   x000D  function L obj s       x000D    Object keys obj  forEach key  gt  s  key  - gt   obj key         x000D    return s  x000D    x000D   x000D  function M obj s       x000D    Object entries obj  forEach   key  value     gt  s  key  - gt   value       x000D    return s  x000D    x000D   x000D  function N obj s       x000D    Object getOwnPropertyNames obj  forEach key   gt  s  key  - gt   obj key        x000D    return s  x000D    x000D   x000D  function O obj s       x000D    Reflect ownKeys obj  forEach key  gt  s  key  - gt   obj key         x000D    return s  x000D    x000D   x000D   x000D   x000D     TEST x000D   x000D  var p     x000D       p1    value1   x000D       p2    value2   x000D       p3    value3  x000D     x000D  let log    name f    gt  console log    name    f p     x000D   x000D  log  A  A   x000D  log  B  B   x000D  log  C  C   x000D  log  D  D   x000D  log  E  E   x000D  log  F  F   x000D  log  G  G   x000D  log  H  H   x000D  log  I  I   x000D  log  J  J   x000D  log  K  K   x000D  log  L  L   x000D  log  M  M   x000D  log  N  N   x000D  log  O  O   x000D  This snippet only presents choosen solutions x000D   x000D   x000D    And here are result for small objects on chrome

User · Answer

You can add a simple forEach function to all objects  so you can automatically loop through any object   Object defineProperty Object prototype   forEach         value  function  func            for  var key in this                if   this hasOwnProperty key                        skip loop if the property is from prototype                 continue                            var value   this key               func key  value                        enumerable  false       For those people who don t like the  for     in -method   Object defineProperty Object prototype   forEach         value  function  func            var arr   Object keys this           for  var i   0  i  lt  arr length  i                  var key   arr i               func key  this key                         enumerable  false       Now  you can simple call   p forEach  function key  value       console log   Key      key       console log   Value      value         If you don t want to get conflicts with other forEach-Methods you can name it with your unique name

[javascript] How do I loop through or enumerate a JavaScript object?

Examples related to javascript

Examples related to loops

Examples related to for-loop

Examples related to each