freeCodeCamp Challenge Guide: Accessing Nested Objects

Guide
1

Accessing Nested Objects

Hints

Hint 1

Use bracket notation for properties with a space in their name.

If we look at our object:

const myStorage = {
  car: {
    inside: {
      "glove box": "maps",
      "passenger seat": "crumbs"
    },
    outside: {
      trunk: "jack"
    }
  }
};

Our object name is myStorage.

|-- Inside that we have a nested object called car.

|— Inside that we have two more called inside and outside each with their
own properties

You can visualize the object structure like this, if it helps:

myStorage
|-- car
|--- inside
|----- glove box: maps
|----- passenger seat: crumbs
|--- outside
|----- trunk: jack

We are asked to assign the contents of glove box ,
which we can see is nested in the inside object,
which in turn, is nested in the car object.

We can use dot notation to access the glove box as follows:

const gloveBoxContents = myStorage.car.inside[complete here]

You must replace complete here with the correct way to access the property.
See clue above if you get stuck.

29 Likes
2

Hi Guys. I’m stuck on it, because in the example there is not other variable being used, so or I don’t get the english in the question or the question it’s not making itself clear.
I’m supposed to do something like this…

// Only change code below this line
var gloveBoxContents = “”; { myStorage.car.inside[“glove box”]; } // Change this line

Any help for this newbie here?

12 Likes
3

You need to assign that value you typed between “{ }” brackets to the “gloveBoxContents” variable.

Solution

var gloveBoxContents = myStorage.car.inside[“glove box”];

11 Likes
4

I don’t understand why this is the solution. Looking at the lesson it seems to be that this should be the correct code:


myStorage.car.inside["glove box"]; // Change this line

When I run the tests though, I can not pass. However, when I run this on repl.it, the output is “maps.” Then, if I switch the code to the solution above on repl.it, I receive an “undefined” message there.

The lesson seems to teach that my code is what the lesson is about. However, it doesn’t work on FCC. What is going on? Is it an FCC bug?

Thanks in advance for any help!

7 Likes
5

I agree. The tutorial seems to be missing a step. Maybe that’s part of the challenge…

4 Likes
6

the code:

myStorage.car.inside[“glove box”];

Worked for me. Just had an “AH-HA” moment as I figured out the answer.
Basically each { denotes a folder. So you have to type out each folder path as if you were telling a search on the computer to find a certain file. So “car” is a folder containing “inside” folder which contains “glove box” file.

Hope that makes sense to you, makes sense to me. lol

11 Likes
7

The most important thing about this challenge is reading the notation for what must be changed:

var gloveBoxContents = ""; // Change this line

just add your info for the nested JSON in that variable. I got hung up on this for longer than I want to admit because I skipped the notation.

3 Likes
8

two things to note here:

1.) the " " does not encapsulate the entire code

2.) why doesn’t it work with a period between inside and [“glove box”]?

this is the wrong code below but why?
’‘
var gloveBoxContents = myStorage.car.inside.[“glove box”];
’’

2 Likes
9

Just wanted to ask one thing more.
What do you use when you have two contents like “big burger” and “McDonalds Outlet”.

// Setup
var myStorage = {
“City”: {
“Central Square”: {
“McDonalds Outlet”: “Big Burgers”,
“Some Place”: “Stuff”
},
“outside”: {
“Something more”: “Other stuff”
}
}
};

// Only change code below this line

var gloveBoxContents = “” // Change this line

Here, how can we access Big Burgers?
I tried using two square brackets for “McDonalds Outlet” and “Big Burger”, but it doesn’t work.
For the dot operator, it needs a quantity without a space in between.
So solution please.
I am just a beginner at present.

3 Likes
10

// Setup
var myStorage = {
“City”: {
“Central Square”: {
“McDonalds Outlet”: “Big Burgers”,
“Some Place”: “Stuff”
},
“outside”: {
“Something more”: “Other stuff”
}
}
};

// Only change code below this line

var gloveBoxContents = myStorage.City[“Central Square”][“McDonalds Outlet”]; // Change this line

Hello!! I’m fairly new to this too, so forgive me if I mess anything up! :grin:

You wouldn’t need to place “Big Burgers” in any kind of notation since it’s going to be the output. You just need to get as far as the surrounding “folder” so you can then pull out the contents.

You want to look in “City Folder”, then “Central Square” Folder, then “McDonalds Outlet” Folder to pull out and view Big Burgers giving you:

var gloveBoxContents = myStorage.City[“Central Square”][“McDonalds Outlet”];

If it isn’t showing you the correct result, try reseting the code and refreshing your page and then retype the code. I know I have to do that ALL the time.

4 Likes
11

Just figured this one out. I was thinking the path had to be put inside the quotes which was really throwing me off.

1 Like
12

Accessing Nested Objects

The sub-properties of objects can be accessed by chaining together the dot or bracket notation.

Here is a nested object:

var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"

Instructions
Access the myStorage object and assign the contents of the glove box property to the gloveBoxContents variable. Use bracket notation for properties with a space in their name.

:warning::warning::warning:SPOILER ALERT:warning::warning::warning:

Solution 1:

  1. Initialize variable gloveBoxContent

  2. Get the value of “glove box” under myStorage variable and assign that to gloveBoxContents

     // Only change code below this line

 var gloveBoxContents = myStorage.car.inside["glove box"]; // Change this line
7 Likes
13

Thank you for taking the time to make an entry that is well-formatted and designed to help campers. I have merged your post with the official guide thread and added a spoiler blur to your solution.

6 Likes