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
.
Preface:
Here in 2018, your options for looping through an object's properties are:
for-in
[MDN, spec] — A loop structure that loops through the names of an object's enumerable properties, including inherited ones, whose names are stringsObject.keys
[MDN, spec] — A function providing an array of the names of an object's own, enumerable properties whose names are strings.Object.values
[MDN, spec] — A function providing an array of the values of an object's own, enumerable properties.Object.entries
[MDN, spec] — A function providing an array of the names and values of an object's own, enumerable properties.Object.getOwnPropertyNames
[MDN, spec] — 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] — 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] — 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.Object.getPrototypeOf
[MDN, spec] and useObject.getOwnPropertyNames
,Object.getOwnPropertySymbols
, orReflect.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
:Object.keys
(with afor-of
loop, but you can use any looping construct):Object.values
:Object.entries
:Object.getOwnPropertyNames
:Object.getOwnPropertySymbols
:Reflect.ownKeys
:All properties, including inherited non-enumerable ones:
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:If anybody needs to loop through arrayObjects with condition:
since ES06 you can get the values of an object as array with
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 )
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:
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 confusingfor
loop. But the odd part is that this newforEach
method does not supportbreak
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:
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.
An object becomes an iterator when it implements the .next() method