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

Sheneeb Sadhik
Sheneeb Sadhik
3,831 Points
Posted by Sheneeb Sadhik
Sheneeb Sadhik
3,831 Points

I am getting this error on console

callbacks.js:24 Uncaught TypeError: Cannot read property 'source' of undefined

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Can you post your code?

Sheneeb Sadhik
Sheneeb Sadhik
3,831 Points
Sheneeb Sadhik
Sheneeb Sadhik
3,831 Points 
//KRIS NIKOLAISEN 
//Can you post your code?


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
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();
});
          ```
Sheneeb Sadhik
Sheneeb Sadhik
3,831 Points
Sheneeb Sadhik
Sheneeb Sadhik
3,831 Points

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>How many people are in space?</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <h1>How Many People Are in Space?</h1>
  <main>
    <button>View all the People</button>
    <div id="people"></div>
  </main>
  <script src="js/callbacks.js"></script>
</body>
</html>```

2 Answers

Axel Perossa
Axel Perossa
13,930 Points
Axel Perossa
Axel Perossa
13,930 Points

It's been answered already. The wikipedia API is returning a disambiguation page for two of the results, and those kind of pages don't have a thumbnail. Thus, data.thumbnail.source doesn't exist (is undefined) and that entire function aborts and throws a TypeError.

I assume at the time the videos were made, the API correctly returned all single pages.

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Have you seen the answers on this page?