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

Javier Briones
seal-mask
.a{fill-rule:evenodd;}techdegree
Javier Briones
Front End Web Development Techdegree Student 29,674 Points

Uncaught 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

hello 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Javier Briones
Front End Web Development Techdegree Student 29,674 Points

Hi 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