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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Begana Choi](https://uploads.teamtreehouse.com/production/profile-photos/10829721/micro_photo_begana.jpg)
Begana Choi
Courses Plus Student 13,126 Pointsimages don't show up except first image
when I open the web browser, I can see the first page with a dog picture and everything's working except showing dog pictures. it only shows alt message. :( here is my code
const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');
// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------
const fetchData = (url) => { return fetch(url) .then( res => res.json()); }
fetchData('https://dog.ceo/api/breeds/image/random') .then( data => generateImage(data.message))
fetchData('https://dog.ceo/api/breed/hound/list') .then( data => generateOptions(data.message))
// ------------------------------------------ // HELPER FUNCTIONS // ------------------------------------------
const generateImage = (data) => {
const html =
<img src="${data}" alt>
<p>Click to view images of ${select.value}s</p>
card.innerHTML = html;
}
const generateOptions = (data) => {
const options = data.map( item =>
<option value=${item}>${item}</option>
).join('')
select.innerHTML = options;
}
const fetchBreedImage = () => {
const breed = select.value;
const img = card.querySelector('img');
const p = card.querySelector('p');
fetchData(https://dog.ceo/api/breed/${breed}/images/random
)
.then( data => {
img.src = data.message;
img.alt = breed;
p.textContent = click image to view more ${breed}s
;
})
}
// ------------------------------------------ // EVENT LISTENERS // ------------------------------------------ select.addEventListener('change', fetchBreedImage); card.addEventListener('click', fetchBreedImage);
// ------------------------------------------ // POST DATA // ------------------------------------------
2 Answers
![Steven Parker](https://uploads.teamtreehouse.com/production/profile-photos/969492/micro_tool_chess_set_2.jpg)
Steven Parker
230,688 PointsIt was tough working with incomplete and unformatted code, but I managed to spot the issue. When I examined the results coming in from the "fetch", it contained: "Breed not found (master breed does not exist)".
The variable "breed" actually contains a sub-breed of "hound", so the path must include the master breed:
fetchData(`https://dog.ceo/api/breed/${breed}/images/random`); // instead of this
fetchData(`https://dog.ceo/api/breed/hound/${breed}/images/random`) // it must be this
For future questions, please see my comments above regarding formatting and snapshots.
![Jerome vanGaalen](https://uploads.teamtreehouse.com/production/profile-photos/7993882/micro_IMG_2266__2_.jpg)
Jerome vanGaalen
18,941 PointsfetchData(https://dog.ceo/api/breed/${breed}/images/random) needs to be a string literal since you are passing the value of ${breed}.
so it should read fetchData(https://dog.ceo/api/breed/${breed}/images/random
) using the tildes(the `` instead of ' '). The only way I know this is mine was doing the same thing so I went back and watched the video. I found I was passing it as a string instead of a string literal. once I used the tilde it worked.
![Steven Parker](https://uploads.teamtreehouse.com/production/profile-photos/969492/micro_tool_chess_set_2.jpg)
Steven Parker
230,688 PointsHe probably had the tildes, but they don't show up here in the forum without Markdown formatting.
Steven Parker
230,688 PointsSteven Parker
230,688 PointsWhen posting code, use Markdown formatting to preserve the code's appearance and retain special symbols.
Also show all the code (the HTML portion is completely missing here). An even better way to share all code at once and make your issue easy to replicate is to make a snapshot of your workspace and post the link to it here.