Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Objects

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Build an Object Challenge – One Solution

3:09 with Guil Hernandez

This video covers one solution to Part One the "Build an Object" challenge, and demonstrates one approach to structuring this data. It then introduces the instructions for Part Two: Rendering the pet information in the browser!

How did you do? Don't worry if you weren't able to complete part one of the challenge - learning how to work with objects takes time and practice! In this video, we'll explore one potential approach to structuring your array of pet objects!

Part One - Example Solution

If you want a fresh start for part two of the challenge, you can copy the solution used in the video from the snippet below:

Array of pet objects:

const pets = [
  {
    name: 'Joey',
    type: 'Dog',
    breed: 'Australian Shepherd',
    age: 8,
    photo: 'img/aussie.jpg'
  },
  { 
    name: 'Patches',
    type: 'Cat',
    breed: 'Domestic Shorthair',
    age: 1,
    photo: 'img/tabby.jpg'
  },
  { 
    name: 'Pugsley',
    type: 'Dog',
    breed: 'Pug',
    age: 6,
    photo: 'img/pug.jpg'
  },
  { 
    name: 'Simba',
    type: 'Cat',
    breed: 'Persian',
    age: 5,
    photo: 'img/persian.jpg'
  },
  { 
    name: 'Comet',
    type: 'Dog',
    breed: 'Golden Retriever',
    age: 3,
    photo: 'img/golden.jpg'
  }
];

Part Two - Creating a Data Structure

For the next step in the challenge, we'll really step things up a notch! We'll work on implementing a for loop to iterate over each object in the pets array and develop a solution for making this information display in the browser. This is a really challenging task, so try your best - and don't worry if you need to step ahead to see an example of just one valid solution!

Your workspace contains an example of the HTML you'll display for each pet, but you can also copy the snippet below:

      <h2>Joey</h2>
      <h3>Dog | Australian Shepherd</h3>
      <p>Age: 8</p>
      <img src="img/aussie.jpg" alt="Australian Shepherd">

We've also included some useful learning resources below to help you if you're feeling stuck, or just need a refresher! Remember, there are multiple ways to add or display HTML in the browser, so you may want to practice multiple approaches!

Terms

  • for statement / for loop - an iteration statement that allows you to repeat a code statement until a specified condition is met.

Resources

Inserting new HTML onto the page

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Hopefully you're able to create the array of objects for 0:00
    the first part of this challenge. 0:03
    Now I'll show you my solution, go ahead and 0:04
    follow along if you haven't started this part yet. 0:06
    I'll start by creating an array named pets. 0:09
    Inside the array I'll add an object with a property named name. 0:13
    I'll assign this property the string Joey. 0:18
    Next, I'll add four more properties and their values. 0:21
    Type, Breed, 0:25
    Age, And Photo. 0:38
    I assigned the photo property the path to the image file, 0:47
    which means that I also included the image directory name in the string. 0:51
    Now I'll type a comma and add four more pet objects to this array. 0:55
    You can copy these from the teacher's notes if you'd like. 1:00
    Notice that each object has the same property names. 1:04
    That's because they're all the same type of object, a pet object, and 1:07
    they share the same type of properties. 1:11
    All right, the first part of this challenge is complete. 1:13
    Before moving on, I'll preview index.html in the browser to make sure that I didn't 1:16
    make a mistake when creating the array of objects. 1:20
    If I did, the JavaScript console will let me know. 1:22
    Everything looks good so far, 1:26
    now let's move on to the second part of this challenge. 1:28
    You have a working data structure holding pet information. 1:31
    Next, you'll display that information on the page. 1:34
    You will need to access each pet object in the array and 1:37
    display the pet's name, type, breed, age and photo. 1:42
    To do this, you'll use a loop, loop through each element of the array, and 1:46
    build a string that contains all of the pet information, 1:50
    then display that information on the page. 1:54
    The finished project should display a small directory like this. 1:56
    Notice that the directory displays each pet image. 1:59
    This means that you'll need to include an image element whose source attribute 2:03
    points to the path of the pet image you want to embed. 2:07
    And don't forget that alt attribute to hold the description of the image. 2:10
    In index.html I have included an example of the html you'll display for 2:16
    each pet as a comment inside the main element. 2:20
    The tricky part might be accessing the property value of each object within 2:27
    the loop. 2:32
    Remember, you use dot notation to access a property of an object. 2:33
    For example, pet.name, accesses the name property of an object named pet. 2:37
    In this case, you'll need to access array elements, so 2:42
    you'll also need to use bracket notation to get to each array element. 2:45
    [SOUND] For example, you created an array of pet data and named that array pets. 2:48
    To access the first pet object, you'd use bracket notation, and 2:55
    an index value of zero like this. 2:59
    Then to access the name of that pet, you'd use dot notation. 3:01
    In the next video, I'll show you how I program the solution to this challenge. 3:05

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up