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

Uncaught TypeError: callback is not a function

Hello,

I am following along with teacher Guil's code, but when I look in the console, I am getting an error message "Uncaught TypeError: callback is not a function". I can't figure out what I am doing differently than the teacher. Help, please! I don't know how to add a screenshot when using my own text editor (if possible, please let me know). Here is a copy/paste of my 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', () => getJSON(astrosUrl));

//Call the getJSON function and pass it the URL to the open notify API.
getJSON(astrosUrl);

//Create an event listener for the button to invoke the getJSON function
btn.addEventListener('click', () => {
  getJSON(astrosUrl, (json) => {
    console.log(json);
  });
});

Mod Edit: Fixed code formatting for readability. You can post fancy code like this too using markdown

rydavim
rydavim
18,814 Points

It will be helpful to community members if you can link to the course this code is from. Your post is currently categorized as Learning Resources, but appears to be from one of the JavaScript courses? If so, I can recategorize to better help other students find your post to assist.

Thank you, rydavim! This code comes from the Aynchronous Programming with JavaScript course.

1 Answer

rydavim
rydavim
18,814 Points

It's possible that the problem lies in calling getJSON() without passing the callback? Try commenting out the line below with // and see if you still get the error.

//Call the getJSON function and pass it the URL to the open notify API.
getJSON(astrosUrl); // The problem may be here?

It's difficult to tell without access to the rest of your code. If possible, it would be helpful to see a workspace snapshot by clicking the camera icon towards the top right of the workspace window and then pasting the link here.