Reputation: 45652
I have a JavaScript object like the following:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
How do I loop through all of p
's elements (p1
, p2
, p3
...) and get their keys and values?
Upvotes: 3615
Views: 2847690
Reputation: 117519
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]);
}
}
For-of with Object.keys() alternative:
var p = {
0: "value1",
"b": "value2",
key: "value3"
};
for (var key of Object.keys(p)) {
console.log(key + " -> " + p[key])
}
Notice the use of for-of
instead of for-in
, if not used it will return undefined on named properties, and Object.keys()
ensures the use of only the object's own properties without the whole prototype-chain properties
Using the new Object.entries()
method:
Note: This method is not supported natively by Internet Explorer. You may consider using a Polyfill for older browsers.
const p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (const [key, value] of Object.entries(p)) {
console.log(`${key}: ${value}`);
}
Upvotes: 5185
Reputation: 417
The nearest solution, close to python's enumerate function:
for key, value in enumerate(object):
# Do something
is a combo of Object.entries()
and for-of
loop:
for(let [key, value] of Object.entries(object)) {
// Do something
}
let object = {
key1: "value1",
key2: "value2",
key3: "value3",
key4: "value4",
key5: "value5"
};
for(let [key, value] of Object.entries(object)) {
console.log(`${key} -> ${value}`);
}
Upvotes: 5
Reputation: 124
You may use my library monadic-objects
for that. It's designed to simplify object modificatons and make it behave like arrays:
p.forEach((key, value) => console.log(key, value))
Installation:
npm i monadic-objects
This library also includes methods:
map
filter
every
some
See README for more information!
Upvotes: 2
Reputation: 318
Pass your object to Object.keys()
. This will return an array containing all the keys in the object. You can then loop through the array using map
. Using obj[key]
where obj
is your object and key
is the current value in the map iteration, you can get the value for that key/property.
const obj = { name: "Jane", age: 50 };
Object.keys(obj).map( key => {
console.log(key, obj[key]);
});
Upvotes: 13
Reputation: 18026
There are a couple of options:
for..in
for thatvar p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (const item in p) {
console.log(`key = ${item}, value = ${p[item]}`);
}
Object.entries()
to create an array with all its enumerable properties. after that you can and loop through it using map
, foreach
or for..of
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.entries(p).map(item => {
console.log(item)
})
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.entries(p).forEach(item => {
console.log(item)
})
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (const item of Object.entries(p)) {
console.log(item)
}
More about Object.entries()
can be found here
Upvotes: 6
Reputation: 3348
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
var myMap = new Map( Object.entries(p) );
for ( let [k, v] of myMap.entries() ) {
console.log( `${k}: ${v}` )
}
<h3>ECMAScript 2017</h3>
<p><b>Object.entries()</b> makes it simple to convert <b>Object to Map</b>:</p>
Upvotes: 0
Reputation: 2490
Using for...in and Object hasOwnProperty
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (var key in p) {
if (p.hasOwnProperty(key)) {
console.log(key, ' : ', p[key]);
}
}
Using for...of and Object keys
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (var key of Object.keys(p)) {
console.log(key, " : ", p[key])
}
Using Object keys and forEach
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.keys(p).forEach(function(key) {
console.log(key, ' : ', p[key]);
});
Using for...of and Object entries
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (let [key, value] of Object.entries(p)) {
console.log(key, ' : ', value);
}
Using Object entries and forEach
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.entries(p).forEach(([key, value]) => console.log(key, ' : ', value));
Upvotes: 6
Reputation: 304
Object.entries(myObject).map(([key, value]) => console.log(key, value))
You can try like this. myObject
will be {name: "", phone: ""}
so and so, this will generate key and value. So key here is name
, phone
and value are like dog
, 123123
.
Example {name: "dog"}
Here key is name
and value is dog
.
Upvotes: 8
Reputation: 465
Single line and more readable code can be..
Object.entries(myObject).map(([key, value]) => console.log(key, value))
Upvotes: 26
Reputation: 10232
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
Upvotes: 0
Reputation: 203
Using a for-of
on Object.keys()
Like:
let object = {
"key1": "value1",
"key2": "value2",
"key3": "value3"
};
for (let key of Object.keys(object)) {
console.log(key + " : " + object[key])
}
Upvotes: 19
Reputation: 1710
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
Upvotes: 37
Reputation: 990
In latest ES script, you can do something like this:
let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
console.log(key, value);
}
Upvotes: 14
Reputation: 92377
Today 2020.03.06 I perform tests of chosen solutions on Chrome v80.0, Safari v13.0.5 and Firefox 73.0.1 on MacOs High Sierra v10.13.6
for-in
(A,B) are fast (or fastest) for all browsers for big and small objectsfor-of
(H) solution is fast on chrome for small and big objectsi
(J,K) are quite fast on all browsers for small objects (for firefox also fast for big ojbects but medium fast on other browsers)Performance tests was performed for
Below snippets presents used solutions
function A(obj,s='') {
for (let key in obj) if (obj.hasOwnProperty(key)) s+=key+'->'+obj[key] + ' ';
return s;
}
function B(obj,s='') {
for (let key in obj) s+=key+'->'+obj[key] + ' ';
return s;
}
function C(obj,s='') {
const map = new Map(Object.entries(obj));
for (let [key,value] of map) s+=key+'->'+value + ' ';
return s;
}
function D(obj,s='') {
let o = {
...obj,
*[Symbol.iterator]() {
for (const i of Object.keys(this)) yield [i, this[i]];
}
}
for (let [key,value] of o) s+=key+'->'+value + ' ';
return s;
}
function E(obj,s='') {
let o = {
...obj,
*[Symbol.iterator]() {yield *Object.keys(this)}
}
for (let key of o) s+=key+'->'+o[key] + ' ';
return s;
}
function F(obj,s='') {
for (let key of Object.keys(obj)) s+=key+'->'+obj[key]+' ';
return s;
}
function G(obj,s='') {
for (let [key, value] of Object.entries(obj)) s+=key+'->'+value+' ';
return s;
}
function H(obj,s='') {
for (let key of Object.getOwnPropertyNames(obj)) s+=key+'->'+obj[key]+' ';
return s;
}
function I(obj,s='') {
for (const key of Reflect.ownKeys(obj)) s+=key+'->'+obj[key]+' ';
return s;
}
function J(obj,s='') {
let keys = Object.keys(obj);
for(let i = 0; i < keys.length; i++){
let key = keys[i];
s+=key+'->'+obj[key]+' ';
}
return s;
}
function K(obj,s='') {
var keys = Object.keys(obj), len = keys.length, i = 0;
while (i < len) {
let key = keys[i];
s+=key+'->'+obj[key]+' ';
i += 1;
}
return s;
}
function L(obj,s='') {
Object.keys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
return s;
}
function M(obj,s='') {
Object.entries(obj).forEach(([key, value]) => s+=key+'->'+value+' ');
return s;
}
function N(obj,s='') {
Object.getOwnPropertyNames(obj).forEach(key => s+=key+'->'+obj[key]+' ');
return s;
}
function O(obj,s='') {
Reflect.ownKeys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
return s;
}
// TEST
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
let log = (name,f) => console.log(`${name} ${f(p)}`)
log('A',A);
log('B',B);
log('C',C);
log('D',D);
log('E',E);
log('F',F);
log('G',G);
log('H',H);
log('I',I);
log('J',J);
log('K',K);
log('L',L);
log('M',M);
log('N',N);
log('O',O);
This snippet only presents choosen solutions
And here are result for small objects on chrome
Upvotes: 48
Reputation: 32512
A good way for looping on an enumerable JavaScript object which could be awesome and common for ReactJS is using Object.keys
or Object.entries
with using map
function. like below:
// assume items:
const items = {
first: { name: 'phone', price: 400 },
second: { name: 'tv', price: 300 },
third: { name: 'sofa', price: 250 },
};
For looping and show some UI on ReactJS
act like below:
~~~
<div>
{Object.entries(items).map(([key, ({ name, price })]) => (
<div key={key}>
<span>name: {name}</span>
<span>price: {price}</span>
</div>
))}
</div>
Actually, I use the destructuring assignment twice, once for getting key
once for getting name
and price
.
Upvotes: 7
Reputation: 9769
Multiple way to iterate object in javascript
Using for...in loop
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (let key in p){
if(p.hasOwnProperty(key)){
console.log(`${key} : ${p[key]}`)
}
}
Using for...of loop
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (let key of Object.keys(p)){
console.log(`key: ${key} & value: ${p[key]}`)
}
Using forEach() with Object.keys, Object.values, Object.entries
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.keys(p).forEach(key=>{
console.log(`${key} : ${p[key]}`);
});
Object.values(p).forEach(value=>{
console.log(value);
});
Object.entries(p).forEach(([key,value])=>{
console.log(`${key}:${value}`)
})
Upvotes: 11
Reputation: 717
You can also use Object.keys() and iterate over the object keys like below to get the value:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.keys(p).forEach((key)=> {
console.log(key +' -> '+ p[key]);
});
Upvotes: 18
Reputation: 25741
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]);
});
ECMAScript 6 adds for...of
:
for (const key of Object.keys(obj)) {
console.log(key, obj[key]);
}
ECMAScript 8 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)
);
You can combine for...of
, destructuring, and Object.entries
:
for (const [key, value] of Object.entries(obj)) {
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.
Upvotes: 1379
Reputation: 1074276
Preface:
Here in 2018, your options for looping through an object's properties are (some examples follow the list):
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 (each entry in the array is a [name, value]
array).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 use Object.getOwnPropertyNames
, Object.getOwnPropertySymbols
, or Reflect.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
:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
const value = o[name];
console.log(`${name} = ${value}`);
}
Object.keys
(with a for-of
loop, but you can use any looping construct):
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
const value = o[name];
console.log(`${name} = ${value}`);
}
Object.values
:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
console.log(`${value}`);
}
Object.entries
:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
console.log(`${name} = ${value}`);
}
Object.getOwnPropertyNames
:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
const value = o[name];
console.log(`${name} = ${value}`);
}
Object.getOwnPropertySymbols
:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
const value = o[name];
console.log(`${String(name)} = ${value}`);
}
Reflect.ownKeys
:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
const value = o[name];
console.log(`${String(name)} = ${value}`);
}
All properties, including inherited non-enumerable ones:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
for (const name of Reflect.ownKeys(current)) {
const value = o[name];
console.log(`[${depth}] ${String(name)} = ${String(value)}`);
}
}
.as-console-wrapper {
max-height: 100% !important;
}
Upvotes: 74
Reputation: 23443
This is how to loop through a javascript object and put the data into a table.
<body>
<script>
function createTable(objectArray, fields, fieldTitles) {
let body = document.getElementsByTagName('body')[0];
let tbl = document.createElement('table');
let thead = document.createElement('thead');
let thr = document.createElement('tr');
for (p in objectArray[0]){
let th = document.createElement('th');
th.appendChild(document.createTextNode(p));
thr.appendChild(th);
}
thead.appendChild(thr);
tbl.appendChild(thead);
let tbdy = document.createElement('tbody');
let tr = document.createElement('tr');
objectArray.forEach((object) => {
let n = 0;
let tr = document.createElement('tr');
for (p in objectArray[0]){
var td = document.createElement('td');
td.appendChild(document.createTextNode(object[p]));
tr.appendChild(td);
n++;
};
tbdy.appendChild(tr);
});
tbl.appendChild(tbdy);
body.appendChild(tbl)
return tbl;
}
createTable([
{name: 'Banana', price: '3.04'}, // k[0]
{name: 'Orange', price: '2.56'}, // k[1]
{name: 'Apple', price: '1.45'}
])
</script>
Upvotes: 2
Reputation: 312
Object.entries()
function:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (var i in Object.entries(p)){
var key = Object.entries(p)[i][0];
var value = Object.entries(p)[i][1];
console.log('key['+i+']='+key+' '+'value['+i+']='+value);
}
Upvotes: 4
Reputation: 3492
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.
Upvotes: 64
Reputation: 324
var p =[{"username":"ordermanageadmin","user_id":"2","resource_id":"Magento_Sales::actions"},
{"username":"ordermanageadmin_1","user_id":"3","resource_id":"Magento_Sales::actions"}]
for(var value in p) {
for (var key in value) {
if (p.hasOwnProperty(key)) {
console.log(key + " -> " + p[key]);
}
}
}
Upvotes: 6
Reputation: 1248
since ES06 you can get the values of an object as array with
let arrValues = Object.values( yourObject) ;
it return the an array of the object values and it not extract values from Prototype!!
and for keys ( allready answerd before me here )
let arrKeys = Object.keys(yourObject);
Upvotes: 6
Reputation: 13013
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 Map
s 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;
//no prototype manipulation
function getObjIterator(obj) {
//create a dummy object instead of adding functionality to all objects
var iterator = new Object();
//give it what the shim does but as its own local property
iterator[Symbol.iterator] = function() {
var keys = Object.keys(obj)[Symbol.iterator]();
var output;
return {next:function() {
if (!(output = keys.next()).done)
output.value = [output.value, obj[output.value]];
return output;
}};
};
return iterator;
}
Now you can just call it as an ordinary function, nothing else is affected
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.
Upvotes: 19
Reputation: 9897
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (var key in p) {
if (p.hasOwnProperty(key)) {
console.log(key + " = " + p[key]);
}
}
<p>
Output:<br>
p1 = values1<br>
p2 = values2<br>
p3 = values3
</p>
Upvotes: 17
Reputation: 4471
var p = {"p1": "value1", "p2": "value2", "p3": "value3"};
for (var key in p) if (p.hasOwnProperty(key)) {
var value = p[key];
console.log(key, value);
}
Upvotes: -1
Reputation: 61401
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.
Upvotes: 0
Reputation: 6830
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]) })
Upvotes: 11
Reputation: 10148
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]))
Upvotes: 11