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 Asynchronous JavaScript with Callbacks Implement a Callback

Console is throwing error for the original code that the teacher provided.

When I run my code, the console throws an error for the original code the teacher provided. It says Uncaught TypeError: Cannot read property 'source' of undefined at generateHTML (callbacks.js:24) at XMLHttpRequest.xhr.onload (callbacks.js:13)

My workspace is https://w.trhou.se/bt44d6t918

1 Answer

Ken Stone
Ken Stone
29,700 Points

You need to check that data.thumbnail.source is indeed set:

// Generate the markup for each profile
function generateHTML(data) {
  const img_src = (data.thumbnail && data.thumbnail.source) ? data.thumbnail.source : '';
  const section = document.createElement('section');
  peopleList.appendChild(section);
  section.innerHTML = `
    <img src=${img_src}>
    <h2>${data.title}</h2>
    <p>${data.description}</p>
    <p>${data.extract}</p>
  `;
}

Okay, thanks! It worked.