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<noob />
17,062 Pointsquestion 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
231,269 PointsIf 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
4,989 PointsParameters can have different names. The best naming convention is to give them descriptive names. Thats why it
s 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 />
17,062 Pointsthanks 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);
Dmitry Polyakov
4,989 PointsgetJSON 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.