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 Convert Promise Handling to Async/Await

Posted by babyoscar
babyoscar
12,930 Points

Nothing is displaying on the page

My code doesn't display anything to the page and the console throws an error saying "async-await.js:28 Uncaught (in promise) TypeError: Cannot read property 'source' of undefined at async-await.js:28 at Array.map (<anonymous>) at generateHTML (async-await.js:24) at HTMLButtonElement.<anonymous> (async-await.js:41)" My workspace is https://w.trhou.se/382tqw53w6 Can someone please help?

4 Answers

nhoj
nhoj
5,408 Points

The problem is that one of the astronauts currently in space shares his name with a footballer, causing the call to https://en.wikipedia.org/wiki/Sergey_Ryzhikov to resolve into a disambiguation article that lacks a thumbnail causing the following line to fail

<img src=${person.thumbnail.source}>

I'd suggest either adding an if-statement to make sure the property exists before generating the HTML for it or removing the line if you just want to move ahead

babyoscar
babyoscar
12,930 Points

Okay. Thanks

Daniel Cranney
Daniel Cranney
11,609 Points
Daniel Cranney
Daniel Cranney
11,609 Points

This whole section of the frontend development course feels pointless. It's by far the most complicated, but because it hasn't been updated in some time we just get a blank screen, so it feels like there is a huge hole in my knowledge when it comes to promises and asynchoronous coding. Considering the monthly subscription fee, this is really disappointing Treehouse...

ian lyles
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
ian lyles
Full Stack JavaScript Techdegree Graduate 16,156 Points
ian lyles
.a{fill-rule:evenodd;}techdegree seal-36
ian lyles
Full Stack JavaScript Techdegree Graduate 16,156 Points

Just want to echo here that there's a problem with this whole section. It is quite hard to follow while having to hunt for solutions issues within the course content code.

Matthew Krell
Matthew Krell
15,578 Points
Matthew Krell
Matthew Krell
15,578 Points 
function generateHTML(data) {
  data.map( person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
    if ( person.type === 'standard' ) {
      section.innerHTML = `
        <img src=${person.thumbnail.source}>
        <span>${person.craft}</span>
        <h2>${person.title}</h2>
        <p>${person.description}</p>
        <p>${person.extract}</p>
      `;
    } else {
      section.innerHTML = `
        <span>${person.craft}</span>
        <h2>${person.title}</h2>
      `;
    }
  });
}

This should work to display around the disambiguation pages