Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Asynchronous Programming with JavaScript Exploring Async/Await Convert Promise Handling to Async/Await

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

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

Okay. Thanks

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...

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.

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