Uncaught TypeError: callback is not a function at XMLHttpRequest.xhr.onload

Question

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

Answer 1 · 2019-09-20T18:41:59Z

September 20, 2019 6:41pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Javier Briones

Javier Briones

Uncaught TypeError: callback is not a function at XMLHttpRequest.xhr.onload

1 Answer

anthony amaro

anthony amaro

Javier Briones

Javier Briones