JavaScript Asynchronous Programming with JavaScript Understanding Promises Handle Multiple Promises with Promise.all

Christian Delos Reyes
Christian Delos Reyes
9,199 Points

I'm not getting all the astronauts

I was only able to retrieve 3 of the 6 astronauts. This is what my page page looks like:

https://ibb.co/9V3wF8n

3 Answers

Daniel Barros
Daniel Barros
Front End Web Development Techdegree Graduate 23,588 Points

Hi Christian,

I had the same issue when I did it. I found that it is due to those astronauts not having a complete record come through from the Wikipedia API. I tweaked a bit the function so that it didn't show only the blank tile. See below how I added the HTML in an if statement and the else part is what creates the tile for astronauts who don't have a complete record coming through from the wiki API.

Have a look at my code below and see if it works for you. And let us know if it does!

Cheers, Daniel.

// Generate the markup for each profile
function generateHTML(data) {
  const section = document.createElement('section');
  peopleList.appendChild(section);
  if (data.type === "standard") {
    section.innerHTML = `
      <img src=${data.thumbnail.source}>
      <h2>${data.title}</h2>
      <p>${data.description}</p>
      <p>${data.extract}</p>
      `;
  } else {
    section.innerHTML = `
      <h2>${data.title}</h2>
      <p>No description available</p>
  `;
  }
}
Daniel Barros
Daniel Barros
Front End Web Development Techdegree Graduate 23,588 Points

Sorry, here is the code with Promise design instead.

// Generate the markup for each profile
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}>
      <h2>${person.title}</h2>
      <p>${person.description}</p>
      <p>${person.extract}</p>`;
    } else {
      section.innerHTML = `
      <h2>${person.title}</h2>
      <p>No description available</p>`;
    }
  })
}
James Roberts
James Roberts
16,359 Points

I had the same problem and the if statement inside the generateHTML function worked. Thanks Daniel. What does "standard" represent in the parameter of the if statement? (person.type === "standard)

function generateHTML(data) {
data.map( person => {
const section = document.createElement('section');
peopleList.appendChild(section);
section.innerHTML = `
<img src=${person.thumbnail.source}>
<h2>${person.title}</h2>
<p>${person.description}</p>
<p>${person.extract}</p>
`;
});
}

This doesn't work when the first astronaut fails to load, so using the @Daniel Barros 's code will fix the problem. +++