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 Asynchronous JavaScript with Callbacks Implement a Callback

Kaung Khant Zaw
Kaung Khant Zaw
1,515 Points

Some images are not showing up.

Some astronaut images are showing error "data.thumbnail is not defined". When I check the error object details, there is no property named "thumbnail". Is it API issue or my code issue ?

If you console log the data received, two entries do not have a thumbnail key. This is an API issue, not anything you did wrong. Its good to get used to the idea that API's can have missing information like this that will cause funny behavior. What I did, in generateHTML to rid of errors is an if/else statement that includes the img tag if data.thumbnail exists. that way at least the name, title, description posts for the ones without a thumbnail.

2 Answers

Ian Ostrom
seal-mask
.a{fill-rule:evenodd;}techdegree
Ian Ostrom
Full Stack JavaScript Techdegree Student 10,331 Points

For the people who show this error the description that displays indicates that data is coming from a disambiguation page, meaning that there are multiple people with this name on Wikipedia with pages.

I handled it this way:

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

This shows only the person's name when the type is "disambiguation" and the full profile when the type is "standard".

I then thought it is possible to select the correct person's name from the list of people the disambiguation page provides by using a regex to search for astronaut, cosmonaut, or taikonaut following the name inside <li> tags, grab what's inside the <li> tags, slice before the comma, and concatenate this to the wikiURL. However, this approach relies on the correct name having one of these keywords, which may depend on the editors of a particular disambiguation page. This may not be true in all cases so I didn't bother to build it.

Kayc M
Kayc M
12,593 Points

That's a clean solution but can you explain me this line

data.type === "standard"

How am I supposed to know the data type and how many there are?

Ian Ostrom
seal-mask
.a{fill-rule:evenodd;}techdegree
Ian Ostrom
Full Stack JavaScript Techdegree Student 10,331 Points

Kayc M each of the profiles from Wikipedia come back with a type property. The only two values I saw were either standard or disambiguation. So I filtered the disambiguation pages out to only show the data from the standard pages.

Tomasz Grodzki
Tomasz Grodzki
8,130 Points

Great solution man! Now everything's clear. Thanks a lot! (first time the error wasn't on my side - finally!) :D

Alex Curtis-Slep
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alex Curtis-Slep
Front End Web Development Techdegree Graduate 14,680 Points

Nice solution Ian! This helped me-I had two folks showing up and a blank spot with no picture or anything. Now I have a name there instead-think as people have mentioned this issue has to do with the API. No errors for me either :)