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 Objects Loop Through Objects Display an Array of Objects on the Page – One Solution

Posted by Ryan Myers
Ryan Myers
6,606 Points

nothing is being displayed when I preview the workspace in the browser.

let html = ' ';

for ( let i = 0; i < pets.length; i++ ) {
  let pet = pets[i];
  html += `
  <h2>${pet.name}</h2>
  <h3>${pet.type} | ${pet.breed}</h3>
  <p>Age:${pet.age}</p>
  <img src="${pet.photo}" alt="${pet.breed}">
`;
}

document.querySelector('main').insertAdjacentHTML('beforeend', html);

Mod edit: added markdown formatting for code readability. Check out examples for how to format your code in the forum in the "Markdown Cheatsheet" link below the comment box.

1 Answer

Cameron Childres
Cameron Childres
11,820 Points
Cameron Childres
Cameron Childres
11,820 Points

Hi Ryan,

Your code is looking good. When I test it I get the pets displayed on the page as expected. This means the issue is likely with something else, such as the pets array itself or the linking of your script files.

Some things to check:

  • Are both of your script files, pets.js and directory.js linked in your html?
  • Is pets.js linked before directory.js? (if directory.js comes first pets won't be defined yet and directory.js will have nothing to work with)

If this doesn't solve it, please post a workspace snapshot so I can take a closer look.