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 Create a Reusable Fetch Function

Begana Choi
Begana Choi
Courses Plus Student 13,126 Points

images 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 // ------------------------------------------

Steven Parker
Steven Parker
230,024 Points

When 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.

2 Answers

Steven Parker
Steven Parker
230,024 Points

It 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.

fetchData(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
Steven Parker
230,024 Points

He probably had the tildes, but they don't show up here in the forum without Markdown formatting.