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

Daniel Cranney
Daniel Cranney
10,393 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
ian lyles
Full Stack JavaScript Techdegree Student 9,103 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,577 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