Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Asynchronous Programming with JavaScript Asynchronous JavaScript with Callbacks Managing Nested Callbacks

question abut the flow of the program in this refactor code.

Hi, in this video Guil added a getProfiles function to simplfy the addEventListener event.

this is the function:

function getProfiles(data) {
  data.people.map(person => {
      getJSON(wikiUrl + person.name, generateHTML);
    });
}

this is the event:

btn.addEventListener("click", (e) => {
  getJSON(astrosUrl, getProfiles);
  //removing the button.
  e.target.remove();
});

I want to fully understand the flow here. when the button get clicked, we pass the astroURL that give us the names of the people that are in space, then we call the getProfile function. this function has a "data" argument, from where this "data" comes from? is it from this line in the getJson fucntion?

return callback(data);

is it because the getJSON function returns a callback with the data that we are getting from the server?

I will really appreciate if anyone can make sense on what we are actually retunring here;

 return callback(data);

4 Answers

Steven Parker
Steven Parker
210,474 Points

If you look at that "return" line along with the line before it, the source of the data should be clear:

  let data = JSON.parse(xhr.responseText);
  return callback(data);

So the information that the GET pulls from the website comes in as "xhr.responseText" and is converted from JSON into a javascript object (by JSON.parse), and that object is what is loaded into "data".

That "data" then gets passed to the callback that was provided to "getJSON" (in the video example it is "generateHTML"), and the final return is what that callback produces. In the video example, it's HTML code that was generated using the data.

Dmitry Polyakov
Dmitry Polyakov
4,961 Points

Parameters can have different names. The best naming convention is to give them descriptive names. Thats why its called data. You receive data when you make a AJAX request. You could give parameters any other names you like. Inside AJAX function you could initialised it as myData. Then you must use this name consistently later in your code.

function getProfiles(myData) {

myData.people.map(person => {

  getJSON(wikiUrl + person.name, generateHTML);

});

}

thanks for the reply but it still didn't answered all my questions for what exactly we are getting returned when calling getJSON function

 return callback(data);

Steven Parker

Dmitry Polyakov
Dmitry Polyakov
4,961 Points

getJSON function retrieves data from a server. Later this data is used by another callback function. The purpose of each function is to process some data passed into it and return new data that can be used later. If a function doesn't return anything you don't receive any data from it.