How to iterate over a JavaScript object?
JavascriptLoopsObjectIterationJavascript ObjectsJavascript Problem Overview
I have an object in JavaScript:
{
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
}
I want to use a for
loop to get its properties. And I want to iterate it in parts (not all object properties at once).
With a simple array I can do it with a standard for
loop:
for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last
But how to do it with objects?
Javascript Solutions
Solution 1 - Javascript
For Arrays, Strings, or Objects, use for .. in
:
for (let key in yourobject) {
console.log(key, yourobject[key]);
}
With ES6, if you need both keys and values simultaneously, do
for (let [key, value] of Object.entries(yourobject)) {
console.log(key, value);
}
To avoid logging inherited properties, check with hasOwnProperty :
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) {
console.log(key, yourobject[key]);
}
}
You don't need to check hasOwnProperty
when iterating on keys if you're using a simple object (for example one you made yourself with {}
).
This MDN documentation explains more generally how to deal with objects and their properties.
If you want to do it "in chunks", the best is to extract the keys in an array. As the order isn't guaranteed, this is the proper way. In modern browsers, you can use
let keys = Object.keys(yourobject);
To be more compatible, you'd better do this :
let keys = [];
for (let key in yourobject) {
if (yourobject.hasOwnProperty(key)) keys.push(key);
}
Then you can iterate on your properties by index: yourobject[keys[i]]
:
for (let i=300; i < keys.length && i < 600; i++) {
console.log(keys[i], yourobject[keys[i]]);
}
Solution 2 - Javascript
Here is another iteration solution for modern browsers:
Object.keys(obj)
.filter((k, i) => i >= 100 && i < 300)
.forEach(k => console.log(obj[k]));
Or without the filter function:
Object.keys(obj).forEach((k, i) => {
if (i >= 100 && i < 300) {
console.log(obj[k]);
}
});
However you must consider that properties in JavaScript object are not sorted, i.e. have no order.
Solution 3 - Javascript
Using Object.entries
you do something like this.
// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]
The Object.entries() method returns an array of a given object's own enumerable property [key, value]
So you can iterate over the Object and have key
and value
for each of the object and get something like this.
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
const key = obj[0];
const value = obj[1];
// do whatever you want with those values.
});
or like this
// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
For a reference have a look at the MDN docs for Object Entries
Solution 4 - Javascript
With the new ES6/ES2015 features, you don't have to use an object anymore to iterate over a hash. You can use a Map. Javascript Maps keep keys in insertion order, meaning you can iterate over them without having to check the hasOwnProperty, which was always really a hack.
Iterate over a map:
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
for (var key of myMap.keys()) {
console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"
for (var value of myMap.values()) {
console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"
for (var [key, value] of myMap.entries()) {
console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
or use forEach:
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
Solution 5 - Javascript
If you want the key and value when iterating, you can use a for...of loop with Object.entries.
const myObj = {a: 1, b: 2}
for (let [key, value] of Object.entries(myObj)) {
console.log(`key=${key} value=${value}`)
}
// output:
// key=a value=1
// key=b value=2
Solution 6 - Javascript
The only reliable way to do this would be to save your object data to 2 arrays, one of keys, and one for the data:
var keys = [];
var data = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
}
}
You can then iterate over the arrays like you normally would:
for(var i = 0; i < 100; i++){
console.log(keys[i], data[i]);
//or
console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
console.log(keys[i], data[i]);
}
I am not using Object.keys(obj)
, because that's IE 9+.
Solution 7 - Javascript
->if we iterate over a JavaScript object using and find key of array of objects
Object.keys(Array).forEach(key => {
console.log('key',key)
})
Solution 8 - Javascript
>If you have a simple object you can iterate through it using the following code:
let myObj = {
abc: '...',
bca: '...',
zzz: '...',
xxx: '...',
ccc: '...',
// ...
};
let objKeys = Object.keys(myObj);
//Now we can use objKeys to iterate over myObj
for (item of objKeys) {
//this will print out the keys
console.log('key:', item);
//this will print out the values
console.log('value:', myObj[item]);
}
>If you have a nested object you can iterate through it using the following code:
let b = {
one: {
a: 1,
b: 2,
c: 3
},
two: {
a: 4,
b: 5,
c: 6
},
three: {
a: 7,
b: 8,
c: 9
}
};
let myKeys = Object.keys(b);
for (item of myKeys) {
//print the key
console.log('Key', item)
//print the value (which will be another object)
console.log('Value', b[item])
//print the nested value
console.log('Nested value', b[item]['a'])
}
>If you have array of objects you can iterate through it using the following code:
let c = [
{
a: 1,
b: 2
},
{
a: 3,
b: 4
}
];
for(item of c){
//print the whole object individually
console.log('object', item);
//print the value inside the object
console.log('value', item['a']);
}
Solution 9 - Javascript
const o = {
name: "Max",
location: "London"
};
for (const [key, value] of Object.entries(o)) {
console.log(`${key}: ${value}`);
}
Solution 10 - Javascript
If you wanted to iterate the whole object at once you could use for in
loop:
for (var i in obj) {
...
}
But if you want to divide the object into parts in fact you cannot. There's no guarantee that properties in the object are in any specified order. Therefore, I can think of two solutions.
First of them is to "remove" already read properties:
var i = 0;
for (var key in obj) {
console.log(obj[key]);
delete obj[key];
if ( ++i > 300) break;
}
Another solution I can think of is to use Array of Arrays instead of the object:
var obj = [['key1', 'value1'], ['key2', 'value2']];
Then, standard for
loop will work.
Solution 11 - Javascript
I finally came up with a handy utility function with a unified interface to iterate Objects, Strings, Arrays, TypedArrays, Maps, Sets, (any Iterables).
const iterate = require('@a-z/iterate-it');
const obj = { a: 1, b: 2, c: 3 };
iterate(obj, (value, key) => console.log(key, value));
// a 1
// b 2
// c 3
Solution 12 - Javascript
For object iteration we usually use a for..in
loop. This structure will loop through all enumerable properties, including ones who are inherited via prototypal inheritance. For example:
let obj = {
prop1: '1',
prop2: '2'
}
for(let el in obj) {
console.log(el);
console.log(obj[el]);
}
However, for..in
will loop over all enumerable elements and this will not able us to split the iteration in chunks. To achieve this we can use the built in Object.keys()
function to retrieve all the keys of an object in an array. We then can split up the iteration into multiple for loops and access the properties using the keys array. For example:
let obj = {
prop1: '1',
prop2: '2',
prop3: '3',
prop4: '4',
};
const keys = Object.keys(obj);
console.log(keys);
for (let i = 0; i < 2; i++) {
console.log(obj[keys[i]]);
}
for (let i = 2; i < 4; i++) {
console.log(obj[keys[i]]);
}
Solution 13 - Javascript
Yes. You can loop through an object using for loop. Here is an example
var myObj = {
abc: 'ABC',
bca: 'BCA',
zzz: 'ZZZ',
xxx: 'XXX',
ccc: 'CCC',
}
var k = Object.keys (myObj);
for (var i = 0; i < k.length; i++) {
console.log (k[i] + ": " + myObj[k[i]]);
}
NOTE: the example mentioned above will only work in IE9+. See Objec.keys browser support here.
Solution 14 - Javascript
<script type="text/javascript">
// method 1
var images = {};
images['name'] = {};
images['family'] = {};
images[1] = {};
images['name'][5] = "Mehdi";
images['family'][8] = "Mohammadpour";
images['family']['ok'] = 123456;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][22] = 2602;
images[1][23] = 2602;
for (const [key1, value1] of Object.entries(images)){
for (const [key2, value2] of Object.entries(value1)){
console.log(`${key1} => ${key2}: ${value2}`);
}
}
console.log("=============================");
// method 2
var arr = [];
for(var x = 0; x < 5; x++){
arr[x] = [];
for(var y = 0; y < 5; y++){
arr[x][y] = x*y;
}
}
for(var i = 0; i < arr.length; i++) {
var cube = arr[i];
for(var j = 0; j < cube.length; j++) {
console.log("cube[" + i + "][" + j + "] = " + cube[j]);
}
}
</script>
Solution 15 - Javascript
var Dictionary = {
If: {
you: {
can: '',
make: ''
},
sense: ''
},
of: {
the: {
sentence: {
it: '',
worked: ''
}
}
}
};
function Iterate(obj) {
for (prop in obj) {
if (obj.hasOwnProperty(prop) && isNaN(prop)) {
console.log(prop + ': ' + obj[prop]);
Iterate(obj[prop]);
}
}
}
Iterate(Dictionary);
Solution 16 - Javascript
You can try using lodash- A modern JavaScript utility library delivering modularity, performance & extras js to fast object iterate:-
var users = {
'fred': {
'user': 'fred',
'age': 40
},
'pebbles': {
'user': 'pebbles',
'age': 1
}
};
_.mapValues(users, function(o) {
return o.age;
});
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
// The `_.property` iteratee shorthand.
console.log(_.mapValues(users, 'age')); // returns age property & value
console.log(_.mapValues(users, 'user')); // returns user property & value
console.log(_.mapValues(users)); // returns all objects
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.js"></script>
Solution 17 - Javascript
Really a PITA this is not part of standard Javascript.
/**
* Iterates the keys and values of an object. Object.keys is used to extract the keys.
* @param object The object to iterate
* @param fn (value,key)=>{}
*/
function objectForEach(object, fn) {
Object.keys(object).forEach(key => {
fn(object[key],key, object)
})
}
Note: I switched the callback parameters to (value,key) and added a third object to make the API consistent other APIs.
Use it like this
const o = {a:1, b:true};
objectForEach(o, (value, key, obj)=>{
// do something
});
Solution 18 - Javascript
Here is a Hand Made Solution:
function iterationForObject() {
let base = 0,
Keys= Object.keys(this);
return {
next: () => {
return {
value: {
"key": Keys[base],
"value": this[Keys[base]]
},
done: !(base++ < Keys.length)
};
}
};
}
Object.prototype[Symbol.iterator] = iterationForObject;
And Then You Can Loop Any Object:
for ( let keyAndValuePair of (Object Here) ) {
console.log(`${keyAndValuePair.key} => ${keyAndValuePair.value}`);
}
Solution 19 - Javascript
There are a number of syntax choices but this one defines the structure upfront (in the signature) and thus eliminates the need for selectors or subscripts to access any part of the object. k
is key, v
is value, i
is index.
const obj = {
kiwi: true,
mango: false,
pineapple: 500
};
Object.entries(obj).forEach(([k, v], i) => {
console.log(k, v, i);
});
// kiwi true 0
// mango false 1
// pineapple 500 2