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 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,880 Points
Posted by teresemartyn
.a{fill-rule:evenodd;}techdegree seal-36
teresemartyn
Front End Web Development Techdegree Graduate 21,880 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
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
Edgardo Serafin
.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
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
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.