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

Posted by Kris Wertman
Kris Wertman
4,922 Points

Wikipedia Disambiguation page causes, "promises.js:47 TypeError: Cannot read property 'source' of undefined"... Fix?

So line 35: <img src=${person.thumbnail.source}> throws an error that causes only one with block to load on the page... The page works without the images, if I take the line out... I have had other problems with this error with this section. I've also seen some there people running into this as well, but haven't been able to find a good solution.

Kris Wertman
Kris Wertman
4,922 Points

Also, please don't point me to the solution in the next section...(why did you wait to put it there?) 

function generateHTML(data) {
  data.forEach( person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
    // Check if request returns a 'standard' page from Wiki
    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 = `
        <img src="img/profile.jpg" alt="ocean clouds seen from space">
        <h2>${person.title}</h2>
        <p>Results unavailable for ${person.title}</p>
        ${person.extract_html}
      `;
    }
  });
}

It gave me three blocks with non-displayed images with alt text and descriptions like: Sergey Ryzhikov Results unavailable for Sergey Ryzhikov

Sergey Ryzhikov may refer to:

Sergey Ryzhikov (cosmonaut), Russian cosmonaut Sergey Ryzhikov (footballer), Russian football player

2 Answers

wc93
wc93
25,725 Points

The course is being updated. Today Guil added changes that get it closer to what it is meant to be. Unfortunately the api that list the people on the ISS gives names that are not compatible/specific enough to target the wiki api summary pages for all of the crew. I was trying to figure out how to add the term "naut" or "ISS" to assist the wiki api targeting but have moved on at this point.

James Edens
James Edens
723 Points
James Edens
James Edens
723 Points

A little late, but or people still doing this course:

If you want to move forward and have it work in a less ambiguous way, you can and a Try Catch block. We have not learned about it yet, (honestly I don't know why it's never taught earlier, it's a great tool and less ambiguous than If-Else when checking for an actual error vs simple branching). A Try Catch will TRY one block of code, if it works, it continues, if it result in an error it will go to the CATCH block, and execute that code. Generally you use it to generate an Error without crashing the application, providing the application can still function with that error. In our case, it just skips the profile that is causing an issue and does something else. The code below is modified (from another source on the forum but with some changes to make it a TRY CATCH instead of an IF ELSE) that fills the profile with default information if it can not find a wiki entry.

function generateHTML(data) {
  data.map((person) => {
    const section = document.createElement("section");
    peopleList.appendChild(section);
// TRY to find the profile
    try {
      section.innerHTML = `
        <img src=${person.thumbnail.source}>
        <h2>${person.title}</h2>
        <p>${person.description}</p>
        <p>${person.extract}</p>
      `;
// If the TRY fails, use this instead to create a new listing that says you can not find the profile. Then continue to the next astronaut
    } catch {
      section.innerHTML = `
        <img src="img/profile.jpg" alt="ocean clouds seen from space">
        <h2>${person.title}</h2>
        <p>Results unavailable for ${person.title}</p>
        ${person.extract_html}
      `;
    }
  });
}