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

Matt WebDev218
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 18,099 Points
Posted by Matt WebDev218
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 18,099 Points

My code displays nothing

The xhr.onload callback never seems to execute, I click the button and the page goes blank and nothing is logged to the console

 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');

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);

    xhr.onload = () => {
      console.log('loaded');
      if(xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        resolve(data);
        console.log(data);
      } else {
        reject( Error(xhr.statusText));
      }
    };

  });
  xhr.onerror = () => reject(Error('A network error occured'));
  xhr.send();
}

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return getJSON(wikiUrl + person.name); // returned because it's now a promise
  }); 
  return profiles;
}

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)
    .then(getProfiles)
    .then(data => console.log(data)) //data represents the value returned by getProfiles
    .catch(err => console.log(err));
  event.target.remove();
});

1 Answer

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hi Matt WebDev218, in the generateHTML function, where you're adding the img element, try changing that line to this:

<img src="${data.thumbnail ? data.thumbnail.source : ''}">

The problem is that not all of the results have a thumbnail property. So you have to check that the property exists before trying to use it, and if it doesn't exist, you can just pass an empty string to the src attribute. :thumbsup:

Matt WebDev218
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 18,099 Points
Matt WebDev218
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 18,099 Points

Hi Robert Manolis thanks for your reply! I added your code, but it still just hangs. Could it be a problem with the way I'm retrieving the information?

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');

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);

    xhr.onload = () => {
      console.log('loaded');
      if(xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        resolve(data);
        console.log(data);
      } else {
        reject( Error(xhr.statusText));
      }
    };

  });
  xhr.onerror = () => reject(Error('A network error occured'));
  xhr.send();
}

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return getJSON(wikiUrl + person.name); // returned because it's now a promise
  }); 
  return profiles;
}

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

btn.addEventListener('click', (event) => {
  getJSON(astrosUrl)
    .then(getProfiles)
    .then(data => console.log(data)) //data represents the value returned by getProfiles
    .catch(err => console.log(err));
  event.target.remove();
});
Robert Manolis
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hey Matt WebDev218, looks like I was missing something in the snippet I shared. I updated the code. Try what's in that snippet now. :thumbsup: