For..In loops in JavaScript - key value pairs
I was wondering if there's a way to do something like a PHP foreach
loop in JavaScript. The functionality I'm looking for is something like this PHP Snippet:
foreach($data as $key => $value) { }
I was looking at the JS for..in
loop, but there seems to be no way to specify the as
. If I do this with a 'normal' for loop (for(var i = 0; i < data.length; i++
), is there a way to grab the key => value pairs?
for (var k in target){
if (target.hasOwnProperty(k)) {
alert("Key is " + k + ", value is " + target[k]);
}
}
hasOwnProperty
is used to check if your target
really has that property, rather than having inherited it from its prototype. A bit simpler would be:
for (var k in target){
if (typeof target[k] !== 'function') {
alert("Key is " + k + ", value is" + target[k]);
}
}
It just checks that k
is not a method (as if target
is array
you'll get a lot of methods alerted, e.g. indexOf
, push
, pop
,etc.)
If you can use ES6 natively or with Babel (js compiler) then you could do the following:
const test = {a: 1, b: 2, c: 3};
for (const [key, value] of Object.entries(test)) {
console.log(key, value);
}
Which will print out this output:
a 1
b 2
c 3
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).
- Object.entries documentation
- for...of documentation
- Destructuring assignment documentation
- Enumerability and ownership of properties documentation
Hope it helps! =)
No one has mentioned Object.keys
so I'll mention it.
Object.keys(obj).forEach(function (key) {
// do something with obj[key]
});
for...in will work for you.
for( var key in obj ) {
var value = obj[key];
}
In modern JavaScript you can also do this:
for ( const [key,value] of Object.entries( obj ) ) {
}