Accessing Data Inside Nested Data Structures in JavaScript — An Example

When I was first introduced to nested data structures in JavaScript, I had a hard time understanding how to extract data from the innermost layers. I’ll walk you through an example here, which I hope will help some other JavaScript learners out there. Explaining JavaScript objects and arrays isn’t within the scope of this blog post, so you’re welcome to check out the MDN (or other) resources on JS objects and arrays here: arrays and objects.

Please feel free to leave me a comment to let me know if these examples helped you or if you have any suggestions. Thanks for reading and good luck on mastering JavaScript!

Cheat Sheet

Here’s a brief cheat sheet, with the important things to remember about JavaScript objects and arrays:

• JavaScript Objects — Remember that you can use dot notation and bracket notation to step into an object to access the data within. I have found dot notation to be more pleasant to use, since it’s easier to read and write, though it’s important to remember the cases in which bracket notation may be required (nonstandard keys and using variables instead of literal keys).
• JavaScript Arrays — Remember your array methods like .forEach() and .map(). Personally, I have found .map() to be more useful both because it automatically returns into a new array and because it allows chaining of methods.

Refresher on JavaScript Objects and Arrays

You’re probably familiar with JavaScript objects and arrays, which are both data structures that allow us to hold sets of related data together. Technically, arrays are a special type of object, though there are some differences between arrays and objects that require differences in the way we work with each of these structures. You will likely recall that objects are denoted by curly braces (i.e. {} ), while arrays are denoted by straight brackets (i.e. [] ). Both arrays and objects hold groups of related data, though it’s important to remember that arrays are necessarily ordered and objects are not. For further examination of both JavaScript objects and arrays, please check out the linked resources above.

What are nested data structures?

As a visual learner, I like to imagine a nested data structure as a physical object with many layers.

If you look at the object as a whole, it might seem large and intimidating at first. But if you just address each layer individually and peel them away one by one, I find that it makes the nested data structure much more digestible and easy to tackle.

Let’s look at an example, below:

We see we have an object, called activitiesList. Inside that object, we see two arrays — one called savedActivities and one called completedActivities. Inside of savedActivities, we’re faced with another array. Inside that array, we have 3 more objects. Each of those three objects has a name, an ID number, and another array of strings, where that array is the value associated with the activities key in their key/value pair.

Wow, reading that all out at once makes it sound so complicated! How could we even begin to extract data from the middle of those nested structures? Let’s just forget about that description and take it one layer at a time.

If you haven’t already, go ahead and copy the activities object into your console so that you can follow along as we step inside each layer. Once you’ve done that, go ahead and just enter activities; into your console. Sure enough, we can see it returns our object that holds two arrays.

• Pro-tip: You can see that it’s returning an object in the final line above, where it says “Prototype: Object” and because it shows curly braces (which denote JS objects) around the “savedActivities: Array(3), completedActivities: Array (2)” response a few lines above the prototype.

Why don’t we start by imagining that we want to get each name value out of the savedActivities array. First, we know from the above that the outer layer is an object and we also know we can use both dot notation and bracket notation to get inside of an object. Given that knowledge, let’s test both the dot notation and the bracket notation methods.

Using dot notation, we’ll type activities.savedActivities into our console, and we’ll get back an array of three objects. Similarly, using bracket notation, we can type activities[“savedActivities”] into our console and we’ll get back the same resulting array of three objects.

• Note: Remember, we can’t use the index (e.g. activities[0]) to get into savedActivities because objects aren’t ordered the same way arrays are.

Since the examples of dot notation and bracket notation above will return the same results, choosing one method over the other is often a matter of personal preference. I typically choose dot notation since it’s easier to type and easier to read, but there are a few cases in which bracket notation is required — instances where the key is a string (i.e. nonstandard keys), and instances where you may need to access values by using variables instead of the literal key (i.e. dynamically accessing properties).

Now that we’ve peeled away the outer object layer to reveal the two arrays inside, we can begin to access the data inside the savedActivities array. And, now that we’re working inside of the savedActivities array, we’ll have the opportunity to use our array methods. Woohoo!

Here’s where you may want to review the MDN documentation on the array methods .forEach() and .map(). Go ahead, I’ll wait!

Though both methods allow you to iterate through the data inside of an array, I tend to reach for .map() since it automatically returns into a new array for you. Let’s try it out.

But first — remember, .map() returns a new array so we’ll need to assign a value this time. .map() also takes each item and does something with it, though I’ll opt to do nothing with it for this first example, below:

Interesting! In plain English, our .map() basically said: “take each item (which in this case are objects) inside of the savedActivities array and put each one into a new array that we’ll call activityMap”. Does this look familiar? It turns out this just gives us the same result as when we simply called activities.savedActivities earlier, since we didn’t actually do anything with the items we mapped over here.

To step one layer deeper, let’s use dot notation to perform an action on each item inside of savedActivities. We decided earlier that we want to get the values that are paired with the name key, so we know we’ll likely need to use that key in our action, below:

Perfect! This time, the .map() said essentially said the same thing, but instead of returning each whole item inside the new array, it returned only the name value.

In other words, we used dot notation to peel back the large activities object and access the savedActivities array. We then used the .map() array method to perform a task on each item inside that array. In this case, the items inside the savedActivities array were objects, and each object had a key/value pair with a key of “name”. This meant we were able to use dot notation inside of our .map() function. The dot notation inside the .map() function essentially said, “take each object inside the savedActivities array and return only the value paired with the ‘name’ key.” Finally, since .map() automatically returns into a new array, we see that the name values were placed into the array that we declared for us. Sweet!

Now that you’ve walked through each step of this example, feel free to play around in your console. Practice using bracket notation instead of dot notation, or trying to access different values. You’re well on your way to mastering the art of extracting data from nested data structures!