Loop all object javascript

Looping through objects in JavaScript

Once in a while, you may need to loop through Objects in JavaScript. The only way to do so before ES6 is with a for. in loop.

The problem with a for. in loop is that it iterates through properties in the Prototype chain. When you loop through an object with the for. in loop, you need to check if the property belongs to the object. You can do this with hasOwnProperty .

for (var property in object)  if (object.hasOwnProperty(property))  // Do things here  > >

We no longer have to rely on for. in and hasOwnProperty now. There’s a better way.

A better way to loop through objects

The better way to loop through objects is first to convert the object into an array. Then, you loop through the array.

You can convert an object into an array with three methods:

Object.keys

Object.keys creates an array that contains the properties of an object. Here’s an example.

const fruits =   apple: 28,  orange: 17,  pear: 54, > const keys = Object.keys(fruits) console.log(keys) // [apple, orange, pear]

Object.values

Object.values creates an array that contains the values of every property in an object. Here’s an example:

const fruits =   apple: 28,  orange: 17,  pear: 54, > const values = Object.values(fruits) console.log(values) // [28, 17, 54]

Object.entries

Object.entries creates an array of arrays. Each inner array has two item. The first item is the property; the second item is the value.

const fruits =   apple: 28,  orange: 17,  pear: 54, > const entries = Object.entries(fruits) console.log(entries) // [ // [apple, 28], // [orange, 17], // [pear, 54] // ]

My favorite of the three is Object.entries because you get both the key and property values.

Looping through the array

Once you’ve converted the object into an array with Object.keys , Object.values , or Object.entries , you can loop through it as if it was a normal array.

// Looping through arrays created from Object.keys const keys = Object.keys(fruits) for (const key of keys)   console.log(key) > // Results: // apple // orange // pear

If you use Object.entries you might want to destructure the array into its key and property.

for (const [fruit, count] of entries)   console.log(`There are $count> $fruit>s`) > // Result // There are 28 apples // There are 17 oranges // There are 54 pears

Wrapping up

The better way to loop through objects is first convert it into an array with one of these three methods.

Then, you loop through the results like a normal array.

If this lesson has helped you, might enjoy Learn JavaScript, where you’ll learn how to build anything you want from scratch. Enrollment for Learn JavaScript opens in July 2018 (in two weeks!).

I hope you found this useful. If you did, I hope you’ll share it with someone else. And feel free to reach out if you have any questions or comments.

Thanks for reading, all the best, and happy coding!

Источник

How to loop through objects keys and values in Javascript?

A common problem faced by programers is looping over an enumerable dataset. This data can come in the form of arrays, lists, maps or other objects. In this article we will deal with this problem and learn 4 ways to loop through objects using javascript to retrieve multiple key-value pairs.

How to loop through objects in JavaScript?

The various methods that can be used to loop through objects in JavaScript are:

1. Using a for. in loop
2. Object.keys method
3. Object.values method
4. Object.entries method

Continue reading to learn more about the various methods.

Table of Contents

Introduction to looping through objects using javascript

If you have an array that is considered to be an object in javascript, you can’t loop through the array using map(), forEach(), or a for..of loop.

map() will give you TypeError: items.map is not a function:

forEach() will give you TypeError: items.forEach is not a function:

for..of will give you TypeError: items are not iterable:

Methods to loop through objects using javascript

for. in Loop

The most straightforward way to loop through an object’s properties is by using the for. in statement. This method works in all modern and old browsers including Internet Explorer 6 and higher.

Here is an example that uses the for. in loop to iterate over an object:

const user = < name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true >; // iterate over the user object for (const key in user) < console.log(`$: $`); > // name: John Doe // email: john.d[email protected] // age: 25 // dob: 08/02/1989 // active: true 

One problem in using the for. in method is that it loops through the properties in the prototype chain as well. Since the objects in JavaScript can inherit properties from their prototypes, the for. in statement will loop through those properties as well.

To avoid this problem, you have to explicitly check if the property belongs to the object by using the hasOwnProperty() method:

To overcome this hassle, later in ES8, two other methods were added, Object.entries() and Object.values(). These methods convert the object into an array and then use array looping methods to loop over that array.

Object.keys() Method

Before ES6, the only way to loop through an object was through using the for. in loop. The Object.keys() method was introduced in ES6 to make it easier to loop over objects.

It takes the object that you want to loop over as an argument and returns an array containing all properties names (or keys).

After which you can use any of the array looping methods, such as forEach(), to iterate through the array and retrieve the value of each property.

const courses = < java: 10, javascript: 55, nodejs: 5, php: 15 >; // convert object to key's array const keys = Object.keys(courses); // print all keys console.log(keys); // [ 'java', 'javascript', 'nodejs', 'php' ] // iterate over object keys.forEach((key, index) => < console.log(`$: $`); >); // java: 10 // javascript: 55 // nodejs: 5 // php: 15 

Object.values() Method

The Object.values() method was introduced in ES8 and it works opposite to that of Object.key(). It returns the values of all properties in the object as an array. You can then loop through the values array by using any of the array looping methods.

Let us look at an example:

const animals = < tiger: 1, cat: 2, monkey: 3, elephant: 4 >; // iterate over object values Object.values(animals).forEach(val => console.log(val)); // 1 // 2 // 3 // 4 

Object.entries() Method

The Object.entries(), an other ES8 method can be used for traversing an array. . Object.entries() outputs an array of arrays, with each inner array having two elements. The first element being the property and the second element is the value.

const animals = < tiger: 1, cat: 2, monkey: 3, elephant: 4 >; const entries = Object.entries(animals); console.log(entries); // [ [ 'tiger', 1 ], // [ 'cat', 2 ], // [ 'monkey', 3 ], // [ 'elephant', 4 ] ] 

To loop over the array returned by Object.entries(), you can either use the for. of loop or the forEach() method as shown below:

// `for. of` loop for (const Loop all object javascript of Object.entries(animals)) < console.log(`$: $`); > // `forEach()` method Object.entries(animals).forEach((Loop all object javascript) => < console.log(`$: $`) >); 

Parting Words

We have briefly seen about 4 different ways to loop through objects in javascript. If you are using old browsers, for. in is still a good option, otherwise, you can use any of the latest methods discussed above.

Источник