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
.
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:
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.It's interesting people in these answers have touched on both
Object.keys()
andfor...of
but never combined them:You can't just
for...of
anObject
because it's not an iterator, andfor...index
or.forEach()
ing theObject.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
Map
s with direct use of the fancyfor...of
DEMO working in Chrome and FF (I assume ES6 only)
So long as you include my shim below:
Without having to create a real Map object that doesn't have the nice syntactic sugar.
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!
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 likegetObjIterator()
then;Now you can just call it as an ordinary function, nothing else is affected
or
There's no reason why that wouldn't work.
Welcome to the future.
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.Since we've made it we can use it this way:
Or if you know the power of ES6 generators, so you certainly can make the code above much shorter.
Sure, you can apply such behavior for all objects with making
Object
iterable onprototype
level.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.
Or you can use destructuring assignment:
You can check out JSFiddle with all code I've provided above.
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:
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.
You can find more about usage on MDN page