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 Managing Nested Callbacks

Posted by <noob />
<noob />
17,062 Points

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
231,236 Points
Steven Parker
Steven Parker
231,236 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,989 Points
Dmitry Polyakov
Dmitry Polyakov
4,989 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);

});

}

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

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,989 Points
Dmitry Polyakov
Dmitry Polyakov
4,989 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.