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

Dimitris Karatsoulas
Dimitris Karatsoulas
5,787 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
203,717 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
3,465 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
203,717 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>";
  }