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

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