Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Create a Reusable Fetch Function

Begana Choi
PLUS
Begana Choi
Courses Plus Student 13,122 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
210,095 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
210,095 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
210,095 Points

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