Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects The Build an Object Challenge, Part 2 Solution

Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points
Posted by Dimitris Karatsoulas
Dimitris Karatsoulas
5,788 Points

How can we access the properties' names?

Hello, I was wondering if there's a way we can access each property's name so that we can code it to get printed just like each property's value instead of explicitly hard coding the names in our HTML output.

2 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You can iterate through the properties if you want ("for (var property in student) ...") and then use bracket notation instead of dot notation to access the value ("student[property]"). But you should be aware of some behavioral differences that will occur:

  • if a property is missing, it will be silently omitted where the original will show the property as "undefined"
  • if any extra properties are added, they will be listed where the original would show only the intended ones
  • the order that the properties are listed is no longer guaranteed
Daniela Fernandes Smith
Daniela Fernandes Smith
Courses Plus Student 10,353 Points
Daniela Fernandes Smith
Daniela Fernandes Smith
Courses Plus Student 10,353 Points

Hi, I tried to do what I think you said above (I'm a beginner) and I got a really weird result. Can you please tell me what went wrong?

var message = ""; var student;

function print(message) { var outputDiv = document.getElementById("output"); outputDiv.innerHTML = message; }

for ( var i = 0; i < students.length; i += 1 ) { student = students[i]; for ( var property in student) { message +="<h2>Student: " + student[property] + "</h2>"; message +="<p>Track: " + student[property] + "</p>"; message +="<p>Achievements: " + student[property] + "</p>"; message +="<p>Points: " + student[property] + "</p>"; } }

print(message);

It prints the following:

Students Student: Athyna Track: Athyna

Achievements: Athyna

Points: Athyna

Student: Phyton Track: Phyton

Achievements: Phyton

Points: Phyton

Student: 10 Track: 10

Achievements: 10

Points: 10

Student: 100 Track: 100

Achievements: 100

Points: 100

Student: Bartleby Track: Bartleby

Achievements: Bartleby

Points: Bartleby

Student: Ruby Track: Ruby

Achievements: Ruby

Points: Ruby

Student: 10 Track: 10

Achievements: 10

Points: 10

Student: 100 Track: 100

Achievements: 100

Points: 100

Student: Evangelyne Track: Evangelyne

Achievements: Evangelyne

Points: Evangelyne

Student: JavaScript Track: JavaScript

Achievements: JavaScript

Points: JavaScript

Student: 10 Track: 10

Achievements: 10

Points: 10

Student: 100 Track: 100

Achievements: 100

Points: 100

Student: Izzy Track: Izzy

Achievements: Izzy

Points: Izzy

Student: IOS Track: IOS

Achievements: IOS

Points: IOS

Student: 10 Track: 10

Achievements: 10

Points: 10

Student: 100 Track: 100

Achievements: 100

Points: 100

Student: Tina Track: Tina

Achievements: Tina

Points: Tina

Student: WordPress Track: WordPress

Achievements: WordPress

Points: WordPress

Student: 10 Track: 10

Achievements: 10

Points: 10

Student: 100 Track: 100

Achievements: 100

Points: 100

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

If you're going to iterate properties, you would not have separate messages (that's how it's done in the other method). So you'd have something like this instead:

  for (var property in student) {
    message += "<p>" + property + ": " + student[property] + "</p>";
  }