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

Posted by Rashaun Ewing
Rashaun Ewing
15,711 Points

I'm trying to insert an 'array' of 'objects' into an html table

var table_data = [ 
                   { first_name : 'Rose', last_name : 'Tyler', home : 'Earth' },
                   { first_name : 'Zoe', last_name : 'Heriot',home : 'Space Station W3'},
                   { first_name : 'Jo', last_name : 'Grant', home : 'Earth'},
                   { first_name : 'Leela', last_name : null, home : 'Unspecified'},
                   { first_name : 'Romana', last_name  : null, home : 'Gallifrey'},
                   { first_name : 'Clara', last_name  : 'Oswald', home : 'Earth'},
                   { first_name : 'Adric',last_name  : null, home : 'Alzarius'},
                   { first_name : 'Susan', last_name  : 'Foreman', home : 'Gallifrey'}
                ];

for (prop in table_data ){
    console.log(prop , ':' , table_data[prop]);
}

1 Answer

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

This code displays the objects in the console.

While it seems to work, it's not related to a table or to the HTML.

For adding items to a table, you might do something like this instead:

var tab = document.querySelector("table");
for (var obj of table_data) {
  var row = `<tr><td>${obj.first_name}</td>
             <td>${obj.last_name}</td>
             <td>${obj.home}</td></tr>`;
  tab.innerHTML += row;
}

Also, when quoting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: Or watch this video on code formatting.

Michael Hulet
Michael Hulet
47,913 Points

I fixed it this time, so you can see how it's done by hitting "Edit question". It's still a great idea to read the Markdown Cheatsheet or watch the course on Markdown Basics, though!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're retrieving and setting the innerHTML for every loop iteration. It would be more efficient and a better practice to build up a string of all the rows inside the loop and then set the html one time after the loop.

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

There are many ways to do this, I picked a code-concise example. In actual practice I would probably create new table row and table data elements and append them to the table.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

It would only take 2 more lines of code to show the better way to do it. It's not any harder to do it the recommended way than the way you've shown here.

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

What I would do in actual practice would take a bit more than 2 extra lines, would run 4 or 5 times faster and have some additional benefits. But this much simpler example illustrates the basic idea.

But I invite you to submit your own solution, and let Rashaun decide which is the best answer.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're making a round trip to the dom every loop iteration.

You can take a look at this performance test here: http://jsben.ch/yDvKH

The innerHTML after the loop is somewhere in the vicinity of 2 to 3 times faster than doing it inside the loop. I would consider that a worthwhile improvement.