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 20,671 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,875 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.