Looping through an array of objects

Introduction

Arrays in javaScript are the most popular and flexible data structures. There are over 30 built in methods you can use off the bat. You can do anything from sorting, reversing, filtering, mapping, splicing and dicing (the last one I made up but you get the point).

An array of objects

Before we begin. If you would like to play around with the full working code then check under the closing body tag and you will find it there.

A cool thing you can do with an array is add objects. Then you can make use of the many array methods to manipulate the data contained in the objects. In this example we will filter out objects that contain a specific value.

Without further ado...

Our array of objects

So that is pretty neat. But what if we wanted to extract a specific object containing a certain pre-defined value? Luckily this tip is about array methods, so that is what we will use.

We need to filter all the objects and return the object that evaluates to true. So the method we will use is conveniently named filter().

Here is the code we will be using...

Filtering the array

This method works great. But it is important to note that what is returned is an array containing two objects [{...}, {...}]. So as you might know, objects are notoriously tricky to loop through.

If you drill into the object you see we get the correct objects returned to us { name: 'Ron', language: 'HTML'}, { name: 'Ryan', language: 'HTML'}.

But how do you display these returned objects?

I am going to break down the steps into functions because... well I like functions and they create neat little code packages to better understand the steps.

Step 1

We call our function from above getProgrammers(programmers) and pass in the array of objects. This is then stored in a variable.

We get back an array containing two objects.

Step2

We now use a forEach() method to loop through the array of objects. Each time an object is found it is used as an argument to call another function.

At this point we are working with single objects.

Step3

Here we use a cool object method called Object.entries(). This returns an array of ['key', 'value'] pairs. We are now no longer working with objects.

Now we use these key-value pairs to call our final function and display the data.

Step4

Take note that the code in blue below will not actually work. I had to modify the display because you can not display a string literal within another. The actual code should be `${key} : ${value}`.

Array of objects displayed

And here you have your array of objects filtered and displayed.

There is quiet a lot going on here. But the cool thing about this setup is you can display any number of objects in an array without even knowing how many objects there are, or what they contain.

Arrays of objects and then some