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 trialbabyoscar
12,930 PointsNothing 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
5,408 PointsThe 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
Daniel Cranney
11,609 PointsThis 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
Full Stack JavaScript Techdegree Graduate 16,156 PointsJust 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
15,578 Pointsfunction 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
babyoscar
12,930 Pointsbabyoscar
12,930 PointsOkay. Thanks