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 Karl Russell Sumando Menil
.a{fill-rule:evenodd;}techdegree
Karl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 Points

i have 5 errors but it ran ok

errors:

/img/aussie.jpg%20alt=:1 GET http://port-80-ek6r7te0sq.treehouse-app.com/img/aussie.jpg%20alt= 404 (Not Found) Image (async) (anonymous) @ directory.js:13 /img/pug.jpg%20alt=:1 GET http://port-80-ek6r7te0sq.treehouse-app.com/img/pug.jpg%20alt= 404 (Not Found) Image (async) (anonymous) @ directory.js:13 /img/tabby.jpg%20alt=:1 GET http://port-80-ek6r7te0sq.treehouse-app.com/img/tabby.jpg%20alt= 404 (Not Found) Image (async) (anonymous) @ directory.js:13 persian.jpg%20alt=:1 GET http://port-80-ek6r7te0sq.treehouse-app.com/img/persian.jpg%20alt= 404 (Not Found) Image (async) (anonymous) @ directory.js:13 golden.jpg%20alt=:1 GET http://port-80-ek6r7te0sq.treehouse-app.com/img/golden.jpg%20alt= 404 (Not Found)

HTML CODE:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript - Pet Directory</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <h1>Pet Directory</h1> <main>

  <h2>Joey</h2>
  <h3>Dog | Australian Shepherd</h3>
  <p>Age: 8</p>
  <img src="img/aussie.jpg" alt="Australian Shepherd">

    <h2>Patches</h2>
  <h3>Cat | Domestic Shorthaird</h3>
  <p>Age: 1</p>
  <img src="img/tabby.jpg" alt="Domestic Shorthair">

    <h2>Pugsley</h2>
  <h3>Dog | Pug</h3>
  <p>Age: 6</p>
  <img src="img/pug.jpg" alt="Pug">

   <h2>Simba</h2>
  <h3>Cat | Persian</h3>
  <p>Age: 5</p>
  <img src="img/persian.jpg" alt="Persian">

    <h2>Comet</h2>
  <h3>Dog | Golden Retriever</h3>
  <p>Age: 3</p>
  <img src="img/golden.jpg" alt="Golden Retriever">

</main>
<script src="js/pets.js"></script>
 <script src="js/directory.js"></script>

</body> </html>

PETS JS CODE:

/* Create an array of 'pet' objects. Each object should have the following properties: name, type, breed, age, and photo */ const pets = [ { name: 'Joey', type: 'Dog', breed: 'Australian Shepherd', age: 8, photo: 'img/aussie.jpg' }, { name: 'Patches', type: 'Cat', breed: 'Domestic Shorthair', age: 1, photo: 'img/tabby.jpg' }, { name: 'Pugsley', type: 'Dog', breed: 'Pug', age: 6, photo: 'img/pug.jpg' }, { name: 'Simba', type: 'Cat', breed: 'Persian', age: 5, photo: 'img/persian.jpg' }, { name: 'Comet', type: 'Dog', breed: 'Golden Retriever', age: 3, photo: 'img/golden.jpg' } ];

Directory JS CODE:

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);

1 Answer

Cody Hansen
Cody Hansen
5,517 Points
Cody Hansen
Cody Hansen
5,517 Points

Your errors are caused by file path issues! Specifically for the images you're using. What the errors are telling you is that it can't find the pictures you are asking for in the javascript. However, your HTML is also asking for the pictures and, due to where your HTML file is, can locate the photos and display them.

The reason for this is because you are using the file path of "img/nameofpic.jpg". This is telling the computer to look for an img directory in the same directory as the current file. Because your HTML file is located in the same directory as your img directory, it can see it. However, your javascript file is located in a "js" directory below the one that has the img directory in it. So, when using the same path, it can't find an img directory because there is no img directory in the js directory.

You can use .. to reference the directory above. Like this!

"../img/nameofpic.jpg"

I hope this helps! Explaining file paths can get complicated and I'm not the best at explaining. I wrote the word "directory" so many times it could be a drinking game...

Good luck with everything! And if you find it confusing, I can do my best to explain a bit better!

Karl Russell Sumando Menil
.a{fill-rule:evenodd;}techdegree
Karl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 Points

Thank you Mr. Cody Hansen