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 Asynchronous Programming with JavaScript Understanding Promises Using Fetch

Muhammad Raza
Muhammad Raza
3,678 Points
Posted by Muhammad Raza
Muhammad Raza
3,678 Points

This whole section promises fetch needs to have a better example that works. Since the API keeps throwing error

when you start the given example to work with the instructor it doesn't work to start with because of the promise.all() method none of them give any result since there is error in one the returned results. So to someone who is learning to the method to begin with its not fair that you have put such an complicated example and then it has bugs to begin with.

chels17
chels17
7,762 Points

Agreed! I've been having so much difficulty with this entire section and it really needs to be updated :( I eventually found something that fixes some of it from the comments here, but I still think it needs to be updated.

Bob Swaney
Bob Swaney
13,010 Points
Bob Swaney
Bob Swaney
13,010 Points

We (the community) might be able to help you work through the problems you are experiencing if you point out the exact part that is throwing the error and maybe post some of your code to make sure that you didn't miss anything. I recently completed that section of the JavaScript track and I didn't really have any issues with it. Im not trying to be a smarty-pants or anything, I'm just saying that it's possible that we might be able to help you out a little better if we saw an example of your code to see where the problem lies.

1 Answer

Shiyu Hong
Shiyu Hong
12,681 Points
Shiyu Hong
Shiyu Hong
12,681 Points

I posted this answer under a similar question (https://teamtreehouse.com/community/const-wikiurl-httpsenwikipediaorgapirestv1pagesummary-nothing-is-working) but hope this helps you out as well.

This is to deal with the issue that nothing displays using current data as of June 19 2020 from the two APIs, due to a name not found in Wikipedia.

The following code works for me. Hope it helps. Adding a bit of error handling so that information for the rest of the astronauts can be displayed.

First, in getProfiles function, I changed Promise.all() to Promise.allSettled(). Promise.all() needs all promises to be fulfilled, while Promise.allSettled() can have rejects. See MDN reference here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Second, in generateHTML function, I added a error handling to ensure person.value.type === "standard", otherwise don't do anything for that iteration. This ensures any names not found in Wikipedia can be skipped.

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return fetch(wikiUrl + person.name)
            .then (response => response.json())
            .catch (err => console.log('Error fetching Wikipedia:', err));      
  }); 
  return Promise.allSettled(profiles);
}

function generateHTML(data) {
  data.map( person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
    if (person.value.type === "standard") {
      section.innerHTML = `
        <img src=${person.value.thumbnail.source}>
        <h2>${person.value.title}</h2>
        <p>${person.value.description}</p>
        <p>${person.value.extract}</p>
      `;
    }
  })

}

btn.addEventListener('click', (event) => {
  event.target.textContent = 'Loading...';
  fetch(astrosUrl)
    .then (response => response.json())
    .then(getProfiles)
    .then(generateHTML)
    .catch( err => {
      peopleList.innerHTML = '<h3>Something went wrong</h3>';
      console.log(err);
    })
    .finally(() => event.target.remove());

});