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 Exploring Async/Await Combine Async/Await with Promises

Swan The Human
seal-mask
.a{fill-rule:evenodd;}techdegree
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 Points
Posted by Swan The Human
.a{fill-rule:evenodd;}techdegree
Swan The Human
Full Stack JavaScript Techdegree Student 19,338 Points

Site not running correctly. loading button does not appear and only three astro profiles show up.

As soon as I added the async to "const profiles = peopleJSON.people.map( async (person) =>" . all of the variables below changed color like they weren't declared correctly or something. and then when I ran the preview, on click the load button shows up but never disappears and only three of the astros show up. I reviewed my code like ten times and then went ahead and downloaded the final code from the project files and pasted it in as well and I'm getting the same results.

When I ran devtools to check what happened with the click response i got an error saying "Uncaught (in promise) TypeError: Cannot read property 'source' of undefined"

Daven Hietala
Daven Hietala
8,040 Points
Daven Hietala
Daven Hietala
8,040 Points

I second this experience. Same thing here not sure what to do about it.

One other thing is that my button does not disappear. Instead it stays in the 'Loading...' state. I had to comment out my catch err like so in order load anything at all and just got the first three like you.

  getJSON(astrosUrl)
    .then(getProfiles)
    .then(generateHTML)
    .catch(err => {
      //peopleList.innerHTML = '<h3>Something went wrong!</h3>';
      console.log(err)
    })
    .finally( () => event.target.remove() );
});

I'll try what Ryan suggested..

Sorry I couldn't give any more useful info.

6 Answers

Ryan Waite
Ryan Waite
7,678 Points
Ryan Waite
Ryan Waite
7,678 Points

I'm guessing theres something wrong with the API, try removing the img tag from the generateHTML function

Daven Hietala
Daven Hietala
8,040 Points
Daven Hietala
Daven Hietala
8,040 Points

After deleting the img tag completely I was able to load the 6. Thanks Ryan.

Adam Sturchio
Adam Sturchio
3,500 Points
Adam Sturchio
Adam Sturchio
3,500 Points

after removing the image i was able to load everybody except Hazzaa Ali Almansoori

Brian Mikol
Brian Mikol
5,423 Points
Brian Mikol
Brian Mikol
5,423 Points

Yes, the code is not robust enough to handle astronaut wiki pages that don't have a profile picture; it completely breaks when it hits that astronaut's wiki page in parsing. I haven't been able to figure out a way to ignore the person.thumbnail.source part of the code if there isn't a picture in order to make the code less brittle – so really the only way around this is if you pull that part of the code out entirely (at least until someone volunteers a working solution).

Mark Maconachie
Mark Maconachie
7,307 Points
Mark Maconachie
Mark Maconachie
7,307 Points

It may be because there are only 3 astronauts in space right now. The JSON that comes back seems quite well formed, although one of the current entries is ambiguous i.e. there are multiple entries for the name "Andrew Morgan" in the wiki. A little fudging of the data will make sure the right info comes back down e.g. // Get the astronaut profiles from wikipedia function getProfiles(data) { data.people.map(person => { console.log("person :", person); person.name = person.name == "Andrew Morgan" ? "Andrew R. Morgan" : person.name; getJSON(wikiUrl + person.name, generateHTML); }); }

Stan Byford
Stan Byford
9,387 Points
Stan Byford
Stan Byford
9,387 Points

Since introducing fetch, await and async the code is no longer working either.

Sukanya Charuchandra
seal-mask
.a{fill-rule:evenodd;}techdegree
Sukanya Charuchandra
Full Stack JavaScript Techdegree Student 547 Points
Sukanya Charuchandra
.a{fill-rule:evenodd;}techdegree
Sukanya Charuchandra
Full Stack JavaScript Techdegree Student 547 Points

An easy work around is to, in the function that generates the HTML, write the call back function within the map method to only run if person.thumbnail exists. It'll look something like this below:

someVariable.map( person => { if(person.thumbnail){

//write in whatever you planned to within here! Hope this helps!

} })

wc93
wc93
25,725 Points
wc93
wc93
25,725 Points

Problem is the names retrieved in astrosUrl api fetch do not correspond directly to wikipedia pages because of differences in the names. Currently I get 3 of the 7 ISS crew. Go to : http://api.open-notify.org/astros.json and see what is returned. Then add those names to the end of: https://en.wikipedia.org/api/rest_v1/page/summary/ Look at the JSON and You get a person.type of disamibigutaion or no-extract Adjust your generateHTML function to account for a type other than standard

So a middle initial or Kate instead of Kathleen or two Sergey Ryzhikovs mess up the direct link to the wikipedia api pages on the cosmo/astro-nauts.