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 trialJavier Briones
Front End Web Development Techdegree Student 29,674 PointsUncaught TypeError: callback is not a function at XMLHttpRequest.xhr.onload
Hello, I am getting "Uncaught TypeError: callback is not a function" error printed in the console, from the 'getJSON' function (return callback(data));
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); //Getting the error here } }; 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>
;
}
getJSON(astrosUrl);
btn.addEventListener('click', () => { getJSON(astrosUrl, (json) => { console.log(json); }); });
1 Answer
anthony amaro
8,686 Pointshello javier try removing this function call this is probably whats causing the issue
getJSON(astrosUrl);
// you may want to remove this. because you are calling the function right away
you may want to be careful when using comments. you probably just commented out a parentheses by accident
// 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); //Getting the error here } };
// when you return the function as you can see you probably just commented out some parentheses by accident
xhr.send(); }
like this
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); //Getting the error here
}
};
xhr.send();
}
there also another mistake in the generateHTML function
// Generate the markup for each profile
function generateHTML(data) {
const section = document.createElement('section');
peopleList.appendChild(section);
section.innerHTML = <img src=${data.thumbnail.source}> //you are writting html in js, you forgot the backticks
<h2>${data.title}</h2>
<p>${data.description}</p>
<p>${data.extract}</p> ;
}
you need to wrap the html in backticks
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> `;
}
hope this helps
Javier Briones
Front End Web Development Techdegree Student 29,674 PointsJavier Briones
Front End Web Development Techdegree Student 29,674 PointsHi Anthony,
Thank you for your help! I'm not getting the callback error anymore. But now some of the astronauts (picture, information, etc.) don't show/appear when I click on the "View all the people" button. I'm getting this error printed out in the console:
Uncaught TypeError: Cannot read property 'source' of undefined at generateHTML (callbacks.js:24) at XMLHttpRequest.xhr.onload (callbacks.js:13)
I wonder if there's something wrong with the AJAX Request. Weird