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 Understanding Promises Handle Multiple Promises with Promise.all

teresemartyn
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
teresemartyn
Front End Web Development Techdegree Graduate 21,879 Points

Cannot get promise to work until I remove "//<img src=${person.thumbnail.source}>" Then - no photo.

Am working on the "Multiple Promise" video. I cannot get anything to display if I keep the following code: "//<img src=${person.thumbnail.source}>". If I remove this, I at least get the content with no photo. Thanks

issa Mohamed
issa Mohamed
7,373 Points

on my console log i get this error too

TypeError: Cannot read property 'source' of undefined at promises.js:35 at Array.map (<anonymous>) at generateHTML (promises.js:31)

i cant load anything yet same code is directly from the video

2 Answers

Edgardo Serafin
seal-mask
.a{fill-rule:evenodd;}techdegree
Edgardo Serafin
Full Stack JavaScript Techdegree Student 11,880 Points

Jacek Skrzypek , yeah when I would remove "source" from ${person.thumbnail.source}, the name and bio of each astronaut comes in fine. The issue with Andrew Morgan is what causes it to not load any astronauts

Jacek Skrzypek
Jacek Skrzypek
5,040 Points

I guess that the problem lays in the 'all' in Promise.all. I've found this solution elswhere on the community forum, and it works fine:

if (typeof(person.thumbnail) != 'undefined') { 
      section.innerHTML = `<img src=${person.thumbnail.source}>` ; 
    } 
    section.innerHTML +=  `
      <h2>${person.title}</h2>
      <p>${person.description}</p>
      <p>${person.extract}</p>
    `;
Jacek Skrzypek
Jacek Skrzypek
5,040 Points

I get the same error. I think that the script doesn't work because Wikipedia is not sure to which Andrew Morgan we refer and gives a 'disambiguation' object, which has no thumbnail ( https://en.wikipedia.org/wiki/Andrew_Morgan ). And because Promise.all() works only if every promise is resolved succesfully, it doesn't when there's no thumbnail.