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

Posted by Junior Aidee
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points

My code is not working. Please help!

I notice others have had this issue as well but I don't have any astronauts with the name "Anatoli". 

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 getJSON(url) {
  return new Promise((resolve, reject) => {
   const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if(xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      resolve(data);
    } else {
      reject(Error(xhr.statusText));
    }
  };
  xhr.onerror = () => reject( Error('A network error occured') );
  xhr.send(); 
  });

}

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return getJSON(wikiUrl + person.name);      
  });
  return Promise.allSettled(profiles);
}

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

}

btn.addEventListener('click', (event) => {
  getJSON(astrosUrl)
    .then(getProfiles)
    .then(generateHTML)
    .catch(err => console.log(err));
  event.target.remove();
});

2 Answers

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hey Junior,

Some of the pages served up for the astronauts don't have a picture associated with them which produces an error when the code tries to get the source value for a nonexistent thumbnail image.

If you correct for specific names then the code will break when there are different astronauts in orbit. Here's a decent workaround -- replace the section.innerHTML statement with this:

    if (person.thumbnail) { 
      section.innerHTML = `<img src=${person.thumbnail.source}>` ; 
    } 
    section.innerHTML +=  `
      <span>${person.craft}</span>
      <h2>${person.title}</h2>
      <p>${person.description}</p>
      <p>${person.extract}</p>
    `;

This way the code only looks for the image source if the thumbnail property is defined.

There's plenty of other ways the code can be cleaned up (disambiguation pages and redirects will produce weird entries) but this will work well enough for the goals of the lesson.

EDIT: Here's a post with another (prettier) workaround

Junior Aidee
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points

Thank you Cameron! I tried the above code and I get "undefined" for all the requests in the browser:

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Interesting. If I change Promise.allSettled to Promise.all in getProfiles(json) the code behaves as expected and doesn't give undefined values:

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return getJSON(wikiUrl + person.name);      
  });
  return Promise.all(profiles);
}

I'm not that experienced with promises yet so I can't actually say why this is happening. Would love if anyone reading this that knows more could chime in! If I figure out the reason this is happening I'll post an update.

Edit: I've found a stackoverflow discussion on Promise.all vs Promise.allSettled that seems to do a good job of addressing what's going on.

Their resolve values are different as well. Promise.all will resolve to an array of each of the values that the Promises resolve to - eg [Promise.resolve(1), Promise.resolve(2)] will turn into [1, 2]. Promise.allSettled will instead give you [{ status : 'fulfilled', value: 1 }, { status : 'fulfilled', value: 2 }]

Junior Aidee
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points
Junior Aidee
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Front End Web Development Techdegree Graduate 14,657 Points

Ok It works now. Thank you very much, Cameron!