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 Posting Data with fetch()

anmo20
anmo20
6,470 Points
Posted by anmo20
anmo20
6,470 Points

How to get the dropdown and <p> to have the data from the random image loaded when the page initially loads?

I've been looking at the code scratching my head trying to figure out how to get the <p> and the breed drop down box to show the breed of the dog that loads when you initially load the page, as well as when you click the picture to get a new one.

As it is now, it just defaults to affenpinschers because it's the first one in the list, but the image is not an affenpinscher when the page initially loads (unless by random chance)

It then updates when you choose a new breed from the list, but still doesn't change if you click the image to get a new image after the page loads.

1 Answer

Ben McMahan
Ben McMahan
7,922 Points
Ben McMahan
Ben McMahan
7,922 Points

Here's one solution, simply start out with a photo of an Affenpinscher:

Promise.all([
    fetchData('https://dog.ceo/api/breeds/list'),
    fetchData('https://dog.ceo/api/breed/affenpinscher/images/random')
]).then(data => {
    // data contains an array of returned objects from fetching data
    const breedList = data[0].message; // First object we fetched
    const randomImage = data[1].message;

    generateOptions(breedList);
    generateImage(randomImage);

});