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

Robert Parson
Robert Parson
5,642 Points
Posted by Robert Parson
Robert Parson
5,642 Points

console.log(json)

I can get it to work, but I dont understand it, I've watched this whole segment over 5 times now

btn.addEventListener("click", () => {
  getJSON(astrosUrl, (json) => {
    console.log(json)
  });
});

2 Answers

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

This code is calling a function, which calls another function, which then calls yet another function. The nested callbacks are possibly what makes it a bit challenging to understand. It might help to break it down and look at the functions one at a time:

  • btn.addEventListener("click", () => {…}); — This function attaches an event listener to the button element (btn). It listens for the "click" event, which triggers when the button is clicked. When the click event occurs, the function provided as the second argument will be executed.
  • getJSON(astrosUrl, (json) => {…});` — Inside the function that's executed when the button is clicked, this calls the getJSON function with two arguments: The first (astrosUrl) is a variable holding the URL of a server that returns JSON data. The second is a callback function that will be executed when the JSON data is received from the server.
  • Finally, console.log(json); logs the received JSON data (json) to the console.

In summary, when the button is clicked, the JSON data is fetched from the astrosUrl and logged to the console.

Does that help?

Nils Kriedner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nils Kriedner
Full Stack JavaScript Techdegree Graduate 30,932 Points
Nils Kriedner
.a{fill-rule:evenodd;}techdegree seal-36
Nils Kriedner
Full Stack JavaScript Techdegree Graduate 30,932 Points

I don't want to add anything to the absolutely excellent (!) explanation of Steven Parker...

I just want to say: I feel you... And this is normal to feel that way, many times actually, when learning coding. Two powerful things that helped me clear brain-fog many times:

  1. Perseverance: You definetely showed that - not only watching the video 5 times, but even then not giving up and askig for better explanations in the forum. Really, really cool, that you don't settle before you fully understand!

  2. Taking a break: Sometimes the opposite of rule 1 actually creates miracles. If I can't understand something after really trying hard (or solving a coding problem) - sometimes then taking a break - breaks the ice... I take a walk or do some other physical activity and let go - and voila, suddenly when I come back, I get it. Sometimes actually immediately after the break...

Anyway, was something I wanted to add here, as I felt like you so many times before, with many coding concepts. And it took me a while to understand that I am not stupid, but that it is just normal, hahaha... And if I just dont give up, and take breaks, it all sinks in eventually.

Steven Parker
Steven Parker
229,745 Points
Steven Parker
Steven Parker
229,745 Points

Good points! You'll find more learning tips in the bonus series course How to Learn.