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

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.

example:

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);
    }
  };
  xhr.send();
}

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

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

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}>

to:

${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,364 Points

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