Home How do I loop through or enumerate a JavaScript object?

# How do I loop through or enumerate a JavaScript object?

Tanmoy
1#
Tanmoy Published in 2009-03-26 06:01:47Z
 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.
1stthomas
2#
 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: var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (var key in p) { if (p.hasOwnProperty(key)) { console.log(key + " -> " + p[key]); } }
Kristian
3#
 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.
Bryan
4#
 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.
Vitim.us
5#
 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 } 
Dan Dascalescu
6#
Dan Dascalescu Reply to 2016-11-10 09:10:58Z
 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]); });  ES2016 adds for...of: for (const key of Object.keys(obj)) { console.log(key, obj[key]); }  ES2017 adds Object.entries() which avoids having to look up each value in the original object: Object.entries(obj).forEach( ([key, value]) => 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.
Francis Lewis
7#
Francis Lewis Reply to 2011-08-18 20:50:22Z
 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 + ' => ' + p[key]); // key is key // value is p[key] } 
Olivier Pons
8#
Olivier Pons Reply to 2017-12-27 08:04:28Z
  var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (var key in p) { if (p.hasOwnProperty(key)) { alert(key + " = " + p[key]); } } --------------------------- --------------------------- Output: p1 = values1 p2 = values2 p3 = values3
bitstrider
9#
 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 
meagar
10#
 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. Pencroff 11# Pencroff Reply to 2016-09-12 22:11:09Z  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 < 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 B.F. 12# B.F. Reply to 2014-11-04 07:45:58Z  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']; ... }  Peter Mortensen 13# Peter Mortensen Reply to 2016-06-16 17:34:48Z  Only JavaScript code without dependencies: var p = {"p1": "value1", "p2": "value2", "p3": "value3"}; keys = Object.keys(p); // ["p1", "p2", "p3"] for(i = 0; i < keys.length; i++){ console.log(keys[i] + "=" + p[keys[i]]); // p1=value1, p2=value2, p3=value3 }  Dmitry Sheiko 14# Dmitry Sheiko Reply to 2015-06-22 11:33:26Z  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: var uniqid = function(){ var text = "", i = 0, possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for( ; i < 32; i++ ) { text += possible.charAt( Math.floor( Math.random() * possible.length ) ); } return text; }, CYCLES = 100000, obj = {}, p1, p2, p3, key; // Populate object with random properties Array.apply( null, Array( CYCLES ) ).forEach(function(){ obj[ uniqid() ] = new Date() }); // Approach #1 p1 = performance.now(); Object.keys( obj ).forEach(function( key ){ var waste = obj[ key ]; }); p2 = performance.now(); console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds."); // Approach #2 for( key in obj ) { if ( obj.hasOwnProperty( key ) ) { var waste = obj[ key ]; } } p3 = performance.now(); console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds."); 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: let map = new Map().set('a', 1).set('b', 2); for (let pair of map) { console.log(pair); } // OR let map = new Map([ [false, 'no'], [true, 'yes'], ]); map.forEach((value, key) => { console.log(key, value); }); Lewis 15# Lewis Reply to 2016-11-10 10:04:59Z  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"); }  Dheeraj V.S. 16# Dheeraj V.S. Reply to 2015-11-11 05:26:12Z  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. var obj = Object.create({}, { // non-enumerable property getFoo: { value: function() { return this.foo; }, enumerable: false } }); obj.foo = 1; // enumerable property Object.getOwnPropertyNames(obj).forEach(function (name) { document.write(name + ': ' + obj[name] + ' '); }); Marius Bakowski 17# Marius Bakowski Reply to 2016-04-14 11:27:20Z  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. Nicolas Bouvrette 18# Nicolas Bouvrette Reply to 2016-06-18 12:55:33Z  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. Hashbrown 19# Hashbrown Reply to 2016-07-16 06:28:06Z  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; 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. Tadas V. 20# Tadas V. Reply to 2016-07-22 03:48:23Z  If anybody needs to loop through arrayObjects with condition: var arrayObjects = [{"building":"A", "status":"good"},{"building":"B","status":"horrible"}]; for (var i=0; i< arrayObjects.length; i++) { console.log(arrayObjects[i]); for(key in arrayObjects[i]) { if (key == "status" && arrayObjects[i][key] == "good") { console.log(key + "->" + arrayObjects[i][key]); }else{ console.log("nothing found"); } } } FieryCod 21# FieryCod Reply to 2017-07-30 14:34:36Z  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: 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}); }  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. 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}); }  You can find more about usage on MDN page
Artyom Pranovich
22#
Artyom Pranovich Reply to 2016-09-02 13:56:17Z
 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 = () => { if(counter >= 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.
Bamieh
23#
 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!
Biber
24#
 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 < 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.
Jaime Rios
25#
Jaime Rios Reply to 2017-10-10 18:57:33Z
 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
Dan Alboteanu
26#
Dan Alboteanu Reply to 2017-11-13 16:05:12Z
 An object becomes an iterator when it implements the .next() method 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: () => { let key = properties[index]; let value = this[key]; let done = index >= 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 
Usman Rana
27#
Usman Rana Reply to 2017-11-16 21:22:52Z
 The Object.keys() method returns an array of a given object's own enumerable properties. Read more about it here var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Object.keys(p).map((key)=> console.log(key + "->" + p[key]))
Harsh Patel
28#
Harsh Patel Reply to 2017-12-20 04:42:57Z
 Here is another method to iterate through an object.  var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Object.keys(p).forEach(key => { console.log(key, p[key]) })
Matas Vaitkevicius
29#
Matas Vaitkevicius Reply to 2018-02-07 11:22:18Z
 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) for (let o of Object.getOwnPropertyNames(Math)) { console.log(o); } I sometimes use this to fast test all functions on objects with simple inputs and outputs.
 You need to login account before you can post.
Processed in 0.405589 second(s) , Gzip On .