Iterate through object properties

Asked 2023-09-20 20:32:45 View 992,916

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?

  • if (typeof(obj[propt]) === 'object') {/* Do it again */ } - anyone
  • 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. - anyone
  • 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. - anyone
  • 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. - anyone
  • 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. - anyone

Answers

Iterating over properties requires this additional hasOwnProperty check:

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

It's necessary because an object's prototype contains additional properties for the object which are technically part of the object. These additional properties are inherited from the base object class, but are still properties of obj.

hasOwnProperty simply checks to see if this is a property specific to this class, and not one inherited from the base class.


It's also possible to call hasOwnProperty through the object itself:

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

But this will fail if the object has an unrelated field with the same name:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

That's why it's safer to call it through Object.prototype instead:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

Answered   2023-09-20 20:32:47

  • @B T According to the Mozilla documentation: "If you only want to consider properties attached to the object itself, and not its prototypes, use getOwnPropertyNames or perform a hasOwnProperty check (propertyIsEnumerable can also be used)." - anyone
  • Because, Alex S, an object's prototype contains additional properties for the object which are technically part of the object. They are inherited from the base object class, but they are still properties. hasOwnProperty simply checks to see if this is a property specific to this class, and not one inherited from the base class. A good explanation: brianflove.com/2013/09/05/javascripts-hasownproperty-method - anyone
  • I feel that I should mention, however, that Object.keys(obj) is now a much better solution for getting the keys of the object itself. Link to the Mozilla documentation: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - anyone
  • @Rafay I really don't understand how this answer has anything to do with the actual question. The loop does not show any inherited properties unless the OP has modified Object.prototype. This may be good advice but you yourself said I couldn't get my head around "looping through object properties". Many chose not to add a hasOwnProperty check. If you created the object yourself and you haven't added some dumb library that adds properties to Object.Prototype there's no need for such check. - anyone
  • One important piece of information is missing. property is a string here, should have been called propertyName. Otherwise can cause confusion for JS newbies like myself, i.e. what to do inside the if. - anyone

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.

Answered   2023-09-20 20:32:47

  • This is now more widely supported: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - anyone
  • And if you need support for old browsers, you can use this polyfill - anyone
  • 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 }); - anyone
  • @AJ_83 There's no good way to break out of a forEach(). Use some() in this case, and return true to break - anyone
  • why is this more readable than for-in? for candidate in candidateStatus... seems readable to me - anyone

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

Answered   2023-09-20 20:32:47

  • How is this any different than Danny R's answer? - anyone
  • It is a oneliner and uses map instead of forEach. And also the console.log satement is maybe interesting for some people. - anyone
  • 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] ); - anyone
  • window.performance.memory is only supported by chrome and Object.keys(obj) returns an empty array. This has nothing to do with .map. - anyone
  • 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 - anyone

In up-to-date implementations of ES, you can use Object.entries:

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

or

Object.entries(obj).forEach(([key, value]) => ...)

If you just want to iterate over the values, then use Object.values:

for (const value of Object.values(obj)) { }

or

Object.values(obj).forEach(value => ...)

Answered   2023-09-20 20:32:47

  • this would be the best solution (object.entries...), but I can't use it. When you want to do this multiple times and can't support it in your framework, you can use the polyfill on this page: developer.mozilla.org/nl/docs/Web/JavaScript/Reference/… - anyone
  • The third suggestion is great if you only the properties' values. Awesome! - anyone
  • this is best answer, you should use for (const [key, value] of Object.entries(obj)) { } - anyone

It's the for...in statement (MDN, ECMAScript spec).

You can read it as "FOR every property IN the obj object, assign each property to the PROPT variable in turn".

Answered   2023-09-20 20:32:47

  • Thanks a lot, I understand it now. I was banging my head, going through books and Google. - anyone
  • Agree with @RightSaidFred, the in operator and the for statement are not involved at all, the for-in statement represents a grammar production on its own: for ( LeftHandSideExpression in Expression ), for ( var VariableDeclarationNoIn in Expression ) - anyone
  • Odd this answer has so many up votes, especially since these popular comments seem to contradict it. - anyone
  • Why is this marked as the answer? It is quite possibly the least helpful one in this thread.. - anyone
  • Least helpful answer? Depends what you think the OP was asking; when I first read the question it seemed like baffled bemusement about the mechanism by which a variable can be used to inspect an object's properties, and which this answer explains eloquently (the 'for-in' misnomer notwithstanding). The question "Why does it come up with every property" I see could imply the OP was looking for hasOwnProperty but doesn't know it, but I think it's more likely this was what the OP wanted to know, and has incorrectly accepted a correct answer to a different question. :-) - anyone

It's just a for...in loop. Check out the documentation at Mozilla.

Answered   2023-09-20 20:32:47

  • The link is broken :(. - anyone
  • @Burak thanks for letting me know - fixed. In the future, feel free to suggest an edit :) - anyone
if (typeof obj === 'object' && obj !== null) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj is neither null nor undefined, which means it's safe to get its keys. 
// Otherwise it will give you a "TypeError: Cannot convert undefined or null to object" if obj is null or undefined when it tries to get its keys in the next line of code.
// NOTE 1: You can use Object.hasOwnProperty() instead of Object.keys(obj).length
// NOTE 2: No need to check if obj is an array because it will work just fine.
// NOTE 3: No need to check if obj is a string because it will not pass the 'if typeof obj is Object' statement.
// NOTE 4: No need to check if Obj is undefined because it will not pass the 'if type obj is Object' statement either.
if (typeof obj === 'object' && obj !== null) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

Answered   2023-09-20 20:32:47

  • Hi, could you add more information about your answer, providing only code does not help. - anyone
  • Hi @Nicolas I've added a line by line explanation to the code. Let me know if it's still not clear - anyone
  • Because forEach skips empty values, I think you could get rid of the if and just do Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`)); like Frank Roth's answer. - anyone

If your environment supports ES2017 then I would recommend Object.entries:

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

As shown in Mozillas Object.entries() documentation:

The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

Basically with Object.entries we can forgo the following extra step that is required with the older for...in loop:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

Answered   2023-09-20 20:32:47

Dominik's answer is perfect, I just prefer to do it that way, as it's cleaner to read:

for (var property in obj) {
    if (!obj.hasOwnProperty(property)) continue;

    // Do stuff...
}

Answered   2023-09-20 20:32:47

  • Should be Object with uppercase o though, no? - anyone
  • @Jonathan Note it is the object variable in the first line. - anyone
  • I have updated the code to avoid confusion ;) - anyone

jquery allows you to do this now:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Answered   2023-09-20 20:32:47

  • $.each({foo:1, length:0, bar:2}, function(k,v){console.log(k,v)}) $.each is not suitable for objects. If an object happens to have a length property and its value happens to be zero, the whole object is treated as if it were an empty array. - anyone
  • Details why I think this is a bug-inviting approach. - anyone

The for...in loop represents each property in an object because it is just like a for loop. You defined propt in the for...in loop by doing:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

A for...in loop iterates through the enumerable properties of an object. Whichever variable you define, or put in the for...in loop, changes each time it goes to the next property it iterates. The variable in the for...in loop iterates through the keys, but the value of it is the key's value. For example:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

You can see how the variable differs from the variable's value. In contrast, a for...of loop does the opposite.

I hope this helps.

Answered   2023-09-20 20:32:47

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).forEach((item) => {console.log("item", obj[item])})

// a
// 3
// 2

Answered   2023-09-20 20:32:47

  • As mentioned in other comments, forEach is more appropriate here, as map is intended to return a new array with the results of calling the code block on each iteration. But we are only interested in the side affects of each iteration, not the return value, hence we don't need that new array that map gives us. - anyone

To add ES2015's usage of Reflect.ownKeys(obj) and also iterating over the properties via an iterator.

For example:

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

can be iterated over by

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

If you would like to iterate directly over the values of the keys of an object, you can define an iterator, just like JavaScipts's default iterators for strings, arrays, typed arrays, Map and Set.

JS will attempt to iterate via the default iterator property, which must be defined as Symbol.iterator.

If you want to be able to iterate over all objects you can add it as a prototype of Object:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

This would enable you to iterate over the values of an object with a for...of loop, for example:

for(val of obj) { console.log('Value is:' + val ) }

Caution: As of writing this answer (June 2018) all other browsers, but IE, support generators and for...of iteration via Symbol.iterator

Answered   2023-09-20 20:32:47

  • Although you are not actually answering the OP's question, this was very helpful for me, I did not know about Reflect yet. - anyone

The above answers are a bit annoying because they don't explain what you do inside the for loop after you ensure it's an object: YOU DON'T ACCESS IT DIRECTLY! You are actually only delivered the KEY that you need to apply to the OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

This is all ECMA5 safe. Even works in the lame JS versions like Rhino ;)

Answered   2023-09-20 20:32:47

  • shouldBeBar is undefined for all three iterations. - anyone
  • undefined is impossible since it's, well, clearly defined in front of you :) This deducts to 2 possibilities: (1) Are you checking for shouldBeBar OUTSIDE of the if() block? Then yes, it will be undefined (out of scope). Or (2) Did you typo the var name? - anyone

You can access the nested properties of the object using the for...in and forEach loop.

for...in:

for (const key in info) {
    console.log(info[key]);
}

forEach:

Object.keys(info).forEach(function(prop) {
    console.log(info[prop]);
    // cities: Array[3], continent: "North America", images: Array[3], name: "Canada"
    // "prop" is the property name
    // "data[prop]" is the property value
});

Answered   2023-09-20 20:32:47

You can use Lodash. The documentation

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

Answered   2023-09-20 20:32:47

  • Why on earth does this "answer" have 10 upvotes? It completely fails to answer the question. I'm beginning to lose faith in the intelligence on the average JS developer. - anyone
  • @developerbmw I understand that using ES6 features is more right way, but I've answered a year ago. Please, share your thoughts with us when you have a minute. - anyone
  • The idea is to focus more on native methods, instead of suggesting the user add a 10000 line library to their page. Don't get me wrong, I do like using Lodash but there's a time and a place for it and it isn't this. - anyone
  • @user9016207 this answer is from 2016, and was more applicable then - esp if you were already using lodash. nowadays if you need individual fns from lodash you can get them one at a time, eg npmjs.com/package/lodash.keys - anyone
Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

Answered   2023-09-20 20:32:47

Nowadays you can convert a standard JS object into an iterable object just by adding a Symbol.iterator method. Then you can use a for of loop and acceess its values directly or even can use a spread operator on the object too. Cool. Let's see how we can make it:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

Answered   2023-09-20 20:32:47

  • Interesting way to do that. Thanks for the function* discovery! - anyone
  • Nice one, you can even use methods, if properties are objects too! - anyone

Your for loop is iterating over all of the properties of the object obj. propt is defined in the first line of your for loop. It is a string that is a name of a property of the obj object. In the first iteration of the loop, propt would be "name".

Answered   2023-09-20 20:32:47

Objects in JavaScript are collections of properties and can therefore be looped in a for each statement.

You should think of obj as an key value collection.

Answered   2023-09-20 20:32:47

  • ! with the important difference that these 'lists of properties' can have names as keys, while normal JS arrays can only have numbers as keys. - anyone

If running Node I'd recommend:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

Answered   2023-09-20 20:32:47

While the top-rated answer is correct, here is an alternate use case i.e if you are iterating over an object and want to create an array in the end. Use .map instead of forEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

Answered   2023-09-20 20:32:47

I want to add to the answers above, because you might have different intentions from Javascript. A JSON object and a Javascript object are different things, and you might want to iterate through the properties of a JSON object using the solutions proposed above, and then be surprised.

Suppose that you have a JSON object like:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", "value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

The wrong way to iterate through its 'properties':

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

You might be surprised of seeing the console logging 0, 1, etc. when iterating through the properties of prop1 and prop2 and of prop3_1. Those objects are sequences, and the indexes of a sequence are properties of that object in Javascript.

A better way to recursively iterate through a JSON object properties would be to first check if that object is a sequence or not:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }
            
     }
}

Answered   2023-09-20 20:32:47

What for..in loop does is that it creates a new variable (var someVariable) and then stores each property of the given object in this new variable(someVariable) one by one. Therefore if you use block {}, you can iterate. Consider the following example.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Answered   2023-09-20 20:32:47

  • Upvoting this, given it's simplicity. In my use case I need to check all the attributes in an object for dodgy values-NaNs, nulls, undefined (they were points on a graph and these values prevented the graph from drawing). To get the value instead of the name, in the loop you would just do obj[someVariable]. Perhaps the reason it was downvoted so much is because it is not recursive. So this would not be an adequate solution if you have a highly structured object. - anyone
  • @KatharineOsborne or perhaps it is because the following phrase is a bit cryptic: "Therefore if you use block {}, you can iterate." The code says more than the text. - anyone

Here I am iterating each node and creating meaningful node names. If you notice, instanceOf Array and instanceOf Object pretty much does the same thing (in my application, i am giving different logic though)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

note - I am inspired by Ondrej Svejdar's answer. But this solution has better performance and less ambiguous

Answered   2023-09-20 20:32:47

Also adding the recursive way:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Usage:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

Answered   2023-09-20 20:32:47

  • @faiz - see my comments, it is safeguard against being stuck in endless loop when you recurrently walk trough object that has cyclic references - anyone

You basically want to loop through each property in the object.

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

Answered   2023-09-20 20:32:47

To further refine the accepted answer it's worth noting that if you instantiate the object with a var object = Object.create(null) then object.hasOwnProperty(property) will trigger a TypeError. So to be on the safe side, you'd need to call it from the prototype like this:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Answered   2023-09-20 20:32:47

Check type

You can check how propt represent object propertis by

typeof propt

to discover that it's just a string (name of property). It come up with every property in the object due the way of how for-in js "build-in" loop works.

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

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

Answered   2023-09-20 20:32:47

If you just want to iterate to map property values then lodash has _.mapValues

const obj = {
  a: 2,
  b: 3
}
const res = _.mapValues(obj, v => v * 2)
console.log(res)
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

Answered   2023-09-20 20:32:47