Arrays of Objects and Objects of Objects

Within the first week of our Flatiron Bootcamp, I gained some much-needed insight into the differences between working with arrays of objects and nested objects in JavaScript. Below, I will walk through some simple examples of accessing data within both.

Our sample data consists of teamsObject and teamsArray. Each contains information about three teams. You will notice the key in the nested object is repeated within the object itself. This is a structure I previously encountered in data returned from API calls. I am not sure if this is standard practice, but it does serve to highlight that name is the key identifier within the team object:

We will first look at how we can determine the number of teams in each structure. This is easily determined in the array easily using .length. Determining the number of teams contained by the teamsObject requires us to first extract an array of keys from the object, and then .length is applied.

Now we wish to print out the names of all teams. The nested object makes it clear that ‘name’ is the primary identifier of a team, by using it as the key in the nested object key:value pairs. Object.keys provides us with the list of team names. Not only is it a bit more complex to extract the team names from the array, but the structure itself does not highlight ‘name’ as being the key identifier in the same way as the nested object. The team names are extracted from the array using the Array.map method:

Moving on to explore various ways to print the contents of the structures to the console log. The two sections that follow illustrate that different techniques are required to produce the same logged output when working with arrays of objects vs nested objects.

First we print out the contents of the array of objects in several different ways. A ‘for…of’ loop is used to walk through each array entry.

1: The first console.log, rather than printing the contents of the object simply logs the fact that it is an object.
2: JSON.stringify() converts the contents of the object to a string with key:value pairs
3: In this next section, the team name is printed, followed by a logging of each key:value pair from the object, looped through using a ‘for…in’ loop
4: Finally, the team name is printed, followed by a list of values contained within the object by using the Object.values() method

with the results as follows:

***************************************
Looping through array of objects:
***************************************
teamA: [object Object]
teamA: {"id":0,"name":"teamA","color":"red"}
teamA:
   id: 0
   name: teamA
   color: red
teamA:
   0,teamA,red
teamB: [object Object]
teamB: {"id":1,"name":"teamB","color":"blue"}
teamB:
   id: 1
   name: teamB
   color: blue
teamB:
   1,teamB,blue
teamC: [object Object]
teamC: {"id":2,"name":"teamC","color":"green"}
teamC:
   id: 2
   name: teamC
   color: green
teamC:
   2,teamC,green

Now compare the code above with this code, printing the nested object contents to the console. A ‘for…in’ loop is used to access each nested object. Within the loop, each nested object is accessed by using the teamsObject[team] reference.

The same information is now logged to the console:

1: The first console.log, again simply logs the fact that it is an object.
2: JSON.stringify() converts the contents of the object to a string with key:value pairs
3: In this next section, the team name is printed, followed by a logging of each key:value pair from the object, looped through using a ‘for…in’ loop. The teamsObject[team]gives us access to the nested object, adding the [key]on the end allows us to print out the value associated that key.
4: Finally, the team name is printed, followed by a list of values contained within the object by using the Object.values() method, again passed teamsObject[team] to access the nested object.

with results as shown below:

teamA: [object Object]
teamA: {"id":0,"name":"teamA","color":"red"}
teamA:
   id: 0
   name: teamA
   color: red
teamA:
   0,teamA,red
teamB: [object Object]
teamB: {"id":1,"name":"teamB","color":"blue"}
teamB:
   id: 1
   name: teamB
   color: blue
teamB:
   1,teamB,blue
teamC: [object Object]
teamC: {"id":2,"name":"teamC","color":"green"}
teamC:
   id: 2
   name: teamC
   color: green
teamC:
   2,teamC,green

Hopefully comparing the code sections for these two console.log sessions clarifies some techniques for accessing data when objects are nested or held in an array.