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

Posted by David Drysdale
David Drysdale
10,815 Points

Took a different approach: does this look okay?

This works just fine, but I took a different approach so I want to make sure I am still writing strong code. Is there anything I should have done differently?

The one thing I was thinking about was making function displayStudent not write directly to the html variable and instead returning a value that would be written to html in the final for loop. 

var html = "<h2>Students</h2>";
var output;

var students = [
  { name: "John", track: "iOS", achievements: 10, points: 1000 },
  { name: "Mary", track: "Web Design", achievements: 9, points: 689 },
  { name: "Pete", track: "Front End Development", achievements: 11, points: 1140 },
  { name: "Algernon", track: "Web Design", achievements: 3, points: 256 },
  { name: "Ahab", track: "iOS", achievements: 21, points: 2502 },
];

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

function displayStudent(number) {

  for (prop in students[i]) {
    html += "<li>" + prop + ": " + students[i][prop] + "</li>";
  } 
}

for (i = 0; i < students.length; i += 1) {
  displayStudent(i);
  html += "<br>";
}

print(html);
John Yzaguirre
John Yzaguirre
22,025 Points
John Yzaguirre
John Yzaguirre
22,025 Points

I did something similar just looped through each object and property in each array within the students array. I tried to not repeat myself as Dave instructs! Although in the lesson where he shows his solution there is a lot of repetition, but I believe it is intentional to show us a certain concept over and over, like a drill. Here was my solution similar to yours:

var students = [ 
  { 
    name: 'Dave',
    track: 'Front End Development',
    points: 14730,
    achievements: 158

  },
  {
    name: 'Jody',
    track: 'iOS Development with Swift',
    points: '16375',
    achievements: '175'

  },
  {
    name: 'Jordan',
    track: 'PHP Development',
    points: '2025',
    achievements: '55'

  },
  {
    name: 'John',
    track: 'Learn WordPress',
    points: '1950',
    achievements: '40'


  },
  {
    name: 'Trish',
    track: 'Rails Development',
    points: '350',
    achievements: '5'



  }
];



for ( var i = 0 ; i < students.length ; i += 1) {
  for ( var prop in students[i] ) {
    if (prop === 'name') {
      document.write ( '<h2>Student: ' + students[i][prop] + '</h2>' + '<br>' );  
    } else {
      document.write ( prop + ': ' + students[i][prop] + '<br><br>');    
    }
  }
}
Teme Sejko
Teme Sejko
2,047 Points
Teme Sejko
Teme Sejko
2,047 Points

I almost word for word did the exact same thing as you John. I prefer it because it gets the job done with less code. Not to mention getElementById confuses the hell out of me.