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


Remi Vledder
Remi Vledder
14,144 Points

Empty sections on the page in the Asynchronous code example

Regarding this video on the topic of Asynchronous callbacks: https://teamtreehouse.com/library/implement-a-callback

The page is loading some empty sections on the page.

The number of sections on the page correspond to the number of astronauts it should load. However, it just does not load the correct data.


I can't post a fiddle or codesandbox example as these website are HTTPS and the open-notify api only supports HTTP. However, I'm using the same code as in the treehouse example: https://w.trhou.se/p44wy130oc (/js/callbacks.js)

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');

// Make an AJAX request
// higher order function
function getJSON(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => {
    if(xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      return callback(data);

// Generate the markup for each profile
function generateHTML(data) {
  const section = document.createElement('section');
  section.innerHTML += `
    <img src=${data.thumbnail.source}>

btn.addEventListener('click', event => {
  getJSON(astrosUrl, json => {
    json.people.map(person => {
      getJSON(wikiUrl + person.name, generateHTML);

It perhaps has something to do with: https://teamtreehouse.com/community/uncaught-typeerror-cannot-read-property-source-of-undefined

3 Answers

Remi Vledder
Remi Vledder
14,144 Points

It seemed indeed to be related to the code not finding the person thumbnail.

It seems that the example used has some astronauts which have a different response object returned when fetching it from the API.

Once you make the thumbnail field conditional it will work.

In other words, change:

<img src=${data.thumbnail.source}>


${data.thumbnail ? '<img src="'+data.thumbnail.source+'" />' : '' }
charlie g
charlie g
12,417 Points

I changed the names Alexander Skvortsov and Andrew Morgan in the astros.json file, to Aleksandr Skvortsov (cosmonaut) and Andrew R. Morgan and it works. That is how it appears on Wikipedia.

Christopher Odden
Christopher Odden
12,237 Points

Did you create the file locally? I added a condition to getProfiles to replace the names before retrieving the info from wikipedia

Robert O'Toole
Robert O'Toole
6,366 Points

do we have to download the JSON file? im so confused and its saying undefined...