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

Charlie Sattgast
Charlie Sattgast
7,205 Points
Posted by Charlie Sattgast
Charlie Sattgast
7,205 Points

Build and Object Challenge only prints last object in array

My code, as far as I can tell, is exactly like Dave's but print(message) only writes the contents of the last object in the array to the page. The loop is working since the last set of values prints to the page, but I'm stumped as to why the print function is skipping the first four objects.

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]; message = '<h2>Student: ' + student.name + '<h2>'; message += '<p>Track: ' + student.track + '</p>'; message += '<p>Achievements: ' + student.achievements + '</p>'; message += '<p> Points: ' + student.points + '</p>'; }

print(message);

Victor Learned
Victor Learned
6,976 Points
Victor Learned
Victor Learned
6,976 Points

You should repost using the markdown syntax to help readabilitiy :)

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]; 
  message = '<h2>Student: ' + student.name + '<h2>'; 
  message += '<p>Track: ' + student.track + '</p>'; 
  message += '<p>Achievements: ' + student.achievements + '</p>'; 
  message+= '<p> Points:' + student.points + '</p>';
}

print(message);

3 Answers

Laura Steiner
Laura Steiner
14,396 Points
Laura Steiner
Laura Steiner
14,396 Points

Hi, Charlie --

In each loop, you assign message to a new value with this line:

message = '<h2>Student: ' + student.name + '<h2>';

That completely loses everything you've done before.

To fix, just change it from = to +=. Then you'll be adding to what you already have in message.

Hope this helps! Please feel free to ask any follow up questions.

Warmly,

Laura

Raquel Smith
Raquel Smith
10,683 Points
Raquel Smith
Raquel Smith
10,683 Points

Ah! I missed that one. Laura is correct here, Charlie. The print() function, if called multiple times, will just what over whatever is in the output div on the page, I think. So yes, you do need to call the function outside of your loop. I didn't take a close enough look at what the print() function was doing. Sorry about that!

Huy Dang
Huy Dang
4,538 Points
Huy Dang
Huy Dang
4,538 Points

Thank you so much. I have been stucked with it for an hour.

Raquel Smith
Raquel Smith
10,683 Points
Raquel Smith
Raquel Smith
10,683 Points 
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]; 
message = '<h2>Student: ' + student.name + '<h2>'; 
message += '<p>Track: ' + student.track + '</p>'; 
message += '<p>Achievements: ' + student.achievements + '</p>'; 
message += '<p> Points: ' + student.points + '</p>'; 
}

print(message);

Hi Charlie -

I included your code formatted above so it's easier to read. Because you are printing the message outside of the loop, each time it runs you are actually redefining what the variable message holds. So it only prints the 4th message because that's the last one that goes through, so it doesn't get redefined. If you put your print command inside the for loop then you should get the output you are looking for. It will print the message every time after it is constructed before it gets redefined on the next loop through.

Charlie Sattgast
Charlie Sattgast
7,205 Points
Charlie Sattgast
Charlie Sattgast
7,205 Points

Sorry, I didn't understand about using the Markdown Syntax feature. Now I do.

Moving the print call into the loop doesn't fix the problem. It still only displays the last time through the loop in the DOM. Also, Dave's example solution has the print call outside the loop exactly like mine. Still scratching my head.

Charlie Sattgast
Charlie Sattgast
7,205 Points
Charlie Sattgast
Charlie Sattgast
7,205 Points

Thanks Laura. Amazing what a difference one character makes in a script!

Now that I look back at Dave's code he does have += on the first instance of the message var.

Thanks so much!

Charlie

Laura Steiner
Laura Steiner
14,396 Points
Laura Steiner
Laura Steiner
14,396 Points

My pleasure!

Yes, it's wild how a very small thing in a script can have a major impact.