Categories
javascript loops object

Iterate through object properties

2284

var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

How does the variable propt represent the properties of the object? It’s not a built-in method or property. Why does it come up with every property in the object?

8

  • 14

    if (typeof(obj[propt]) === 'object') {/* Do it again */ }

    – noob

    Nov 29, 2011 at 14:39


  • 13

    Well, really sorry for this question. I know what a loop is, I couldn’t get my head around “looping through object properties”, which I think is cleared now. Also, they have recommended me “JavaScript Step by Step 2nd Edition – Steve Suehring at school.

    – Rafay

    Nov 29, 2011 at 14:39

  • 273

    This is a fine begginers question. I’d add that I have 15 years of professional experience with other languages and I needed this answer. I’d plus 2000 if I could.

    Feb 1, 2013 at 13:28

  • 70

    Crazy, but I’ve been coming to this page every few months for years to relearn the syntax on how to do this. I don’t bother to remember how to do this… I just remember that this page is always here on SO.

    – Dave

    Jul 9, 2015 at 15:29


  • 17

    This is the strangest page I’ve seen on StackOverflow. If you read the question carefully, only one answer even begins to attempt to answer what is actually being asked, and it has a score of -6. The highest scoring answer, which was accepted, not only doesn’t answer, but is simply wrong.

    – user1106925

    Apr 4, 2017 at 15:31

1281

As of JavaScript 1.8.5 you can use Object.keys(obj) to get an Array of properties defined on the object itself (the ones that return true for obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

This is better (and more readable) than using a for-in loop.

Its supported on these browsers:

  • Firefox (Gecko): 4 (2.0)
  • Chrome: 5
  • Internet Explorer: 9

See the Mozilla Developer Network Object.keys()‘s reference for futher information.

13

  • 8

    This is now more widely supported: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    Jan 29, 2014 at 14:00

  • 3

    And if you need support for old browsers, you can use this polyfill

    – KyleMit

    May 5, 2014 at 15:55

  • 27

    In environments that support this language construct, this method allows Array.foreach to be called: Object.keys(myObject).forEach(function(key,index) { //key = the name of the object key //index = the ordinal position of the key within the object });

    Nov 6, 2014 at 18:46


  • 4

    @AJ_83 There’s no good way to break out of a forEach(). Use some() in this case, and return true to break

    – Daniel Z.

    Mar 23, 2017 at 10:47

  • 13

    why is this more readable than for-in? for candidate in candidateStatus… seems readable to me

    – Jona

    Jul 30, 2018 at 11:48

365

Girls and guys we are in 2019 and we do not have that much time for typing… So lets do this cool new fancy ECMAScript 2016:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

8

  • 22

    How is this any different than Danny R’s answer?

    – krillgar

    Jan 11, 2017 at 15:37

  • 27

    It is a oneliner and uses map instead of forEach. And also the console.log satement is maybe interesting for some people.

    Jan 12, 2017 at 16:08


  • Satly, that doesn’t work when obj=window.performance.memory :-/ Where as for in does. i.e. var obj = window.performance.memory; for( key in obj ) console.log( 'key=' + key + ' val=' + obj[key] );

    Feb 1, 2017 at 23:34


  • 2

    window.performance.memory is only supported by chrome and Object.keys(obj) returns an empty array. This has nothing to do with .map.

    Feb 2, 2017 at 9:40

  • In case anyone doesn’t want to monkey around re-structuring this single-liner to do more than one thing at a time with e, I’ve posted this gist. It’s basically just like most hash implementations, and uses ( (key) => (value) ) instead of { key => value }, but if you haven’t had to deal with that before, it could help you visualize it better: gist.github.com/the-nose-knows/9f06e745a56ff20519707433e28a4fa8

    Apr 19, 2017 at 19:11