Nested Objects

In the previous exercise we explored basic objects, but you may find that you need extract data from more complex objects. Basically, objects within objects or objects within arrays within objects etc. These more complex objects are referred to as nested objects. In this lesson we are going to work with data that came from NASA's asteroid api. We will extract information from one specific asteroid named Helen (I added the name) who orbits around Mars.

  1. Download nested.zip.
  2. Drag the folder (nested) into your work area.
  3. Open nested.html and nested.js with brackets. They should already be connected and ready to use
  4. Take a look at the object named asteroid in the nested.js. There is a lot of information in that thing. It has a name, which I anthropomorphized from Nasa's much more boring name. There is also information about diameter, whether or not it is potentially hazardous to us humans and our planet, speed, etc.
  5. Let's begin by extracting the name and displaying it inside of <section id="asteroid"> in our html file. You know the drill.  document.querySelector('#asteroid').innerHTML = asteroid.name. At this point the word Helen should appear in your html document.
  6. That was a simple path, but what we really want to know, of course, is there any chance that asteroid might lead to a real life horror movie? Let's find out. Delete name from asteroid.name and start typing is_pote. The full name: is_potentially_hazardous_asteroid should soon write itself for you (if you are lucky). Test again. OMG, it's true!
  7. Now we need more information such as how close that thing comes to our planet. Unfortunately, that information is buried in something much more frightening than a stray asteroid: an object inside of an object inside of an array inside of an object, inside of yet another object (or something like that)! How do we get that data out. Take a look at "close_approach_data": on line 30. "close_approach_data" contains an array with one object, which contains three additional objects: close_approach_date, miss_distance, and orbiting_body.
      1. if we wanted to extract miles from miss_distance, first we have to find our way to close_approach_data, then miss_distance, then miles.
      2. close_approach_data is easy. Simply add .close_approach_data to asteroid with dot syntax (asteroid.close_approach_data) and you have it. Unfortunately, you can't reach the next level with a dot. For that you need array brackets [ ] with a number inside. Oddly enough, close_approach_data references an array with just one item inside.  As we know arrays begin with 0, which means that our next step is close_approach_data[0]
      3. Next, miss_distance is accessible via dot syntax; then an additional dot will lead you to miles (whew). The good news is that this asteroid is over three million miles away!
      4. You just extracted one of the most challenging pieces of data in this particular object. Pull out a few more just for fun before you move on to the challenge.

Take the challenges.

  1. Use Javascript to extract data from the asteroid object, and combine it with strings (text in quotes) to make the following sentence appear in your html: The asteroid named Helen is between 0.3147066768 and 0.7037055224 miles wide, and will miss striking Earth by approximately 3401319 miles.
  2. The very first element in our asteroid is a link that leads to its very own web page. Your next task is to extract that link and turn it into an actual clickable link inside of your html document. You know you can do this.