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 trialSheneeb Sadhik
3,831 PointsI am getting this error on console
callbacks.js:24 Uncaught TypeError: Cannot read property 'source' of undefined
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
3,831 Pointshtml
<!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
13,930 PointsIt'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
54,971 PointsHave you seen the answers on this page?
KRIS NIKOLAISEN
54,971 PointsKRIS NIKOLAISEN
54,971 PointsCan you post your code?