Can't figure out Jquery

Hi,

I’ve completed the first few stages on the journey to getting certified in Front-End Development and am now stuck on the random quote generation assignment.
I realise now that none of the previous lessons have really given me any handling expertise, or even understanding, of JQuery. Could you please suggest a few resources i could use to learn and understand how to implement JQuery functions

Thank you

I would suggest starting at https://jquery.com/. They have useful links there and a learning centre.

1 Like

A lot of people get stuck on dealing with APIs. I wrote this pen to help people at least get started. All I ask is that you understand what you’re using.

APIs are confusing - they are all different, they are often poorly documented, and they can change without warning. Add onto that that it’s a confusing topic for some…

jQuery has two main benefits. It makes fetching AJAX data easier. This has changed a bit now that JS has the fetch function, making it a bit easier, but it still is a common option. The other big benefit is that it makes DOM manipulation a lot easier.

Just build your app in stages and test each stage. If you need to, make little side apps to test ideas. If you get stuck, ask the forum. My advice is to ask a very specific question and show us what you’ve tried - tell us what you want it to do and what it is doing instead. Generally, the more specific the question, the better the answers in both quality and quantity.

This is confusing stuff. Trust me, we’ve all been where you are now.

1 Like

Hi Kevin,
Thanks a lot for the pen, but i think I’m at a stage even before this - to the point where i don’t understand where your function(data) is getting it’s data from.
where is the function being called? how is $.getJSON pulling anything? actually, what does $.getJSON really do and how?

I understand that this is far behind the standard i’m expected to be at in this stage and just wanted to know how to catch up (since i can’t find which modules taught this in the FCC lessons)

Thank you for the encouragement, i hope to soon reach a level of understanding that will allow me to create. If you could direct me to some resources from which i could build a base of general JQuery understanding, I would be extremely grateful

i don’t understand where your function(data) is getting it’s data from. where is the function being called?

JS is an odd language in many ways. Most languages are synchronous by default - they wait until something is done before doing the next thing. But on the web you need to often request things and you don’t know when you will get a reply so you can’t wait. That is what asynchronous functions are for and that is where JS shines.

  $.getJSON(urlForismatic, function(data) {
    console.log("\n\n\n*** forismatic $.getJSONexample...");
    console.log(data);
    showInfo("Example of forismatic API using $.getJSON", data.quoteText, data.quoteAuthor, data);
  }); // $.getJSON

When the JS gets to this code, it knows that it is making an asynchronous call out into the internet. It says: OK, you go get the data and I’m going to get back to execute code, but if you want to give me a function, you can call that when you get back, a “call back” function if you will. So, in our code, we have constructed and anonymous function (no name) and sent that, as the second argument of $.getJSON. We could have named and created a function somewhere else, but doing it this way is common enough.

So, getJSON goes off and gotten it’s data. By default, we know that it will send it back in an object. In our anonymous function, we know a parameter is coming in. We’ve chosen to accept it under the name of “data”, but could have called it anything. We know that getJSON sends back a data object and that’s what we’re calling it.

Since JS has almost certainly finished the rest of the code and is patiently waiting for events or other callbacks, it sees that that getJSON call is returning and feeds that data into the anonymous function it stored as a call back for this. That function now has access to that data.

Again, JS is a strange language in some ways. The way it passes functions around like cans of beer is one of them. A very common use for that is callback functions. A big chunk of your confusion seems to come from not understanding CBs. Yeah, I remember they confused the hell out of me. I might suggest watching some youtube videos about JS CBs. Really, it’s strange at first, but once it clicks, it’s kind of cool. Just work at it, you’ll get it. But CBs are hugely important for JS so don’t skip over it.

1 Like

That is so well explained! Thank you. I will get working on CBs

Would you suggest that i do a few smaller projects on my own before i continue the ones suggested by FCC?

That’s up to you. I did a lot of “prep projects” while working on the FCC projects. Like for the quote project, I did a little project where I only saw if I knew how to get data from the API. Then I did one where I made sure I could put things on the screen. If I wasn’t sure how to do those things, I went to other sources, like web pages, youtube, etc. I went to other things, but always in the service of the FCC path - I didn’t want to get too far off the path. It’s up to you, but that was my approach.

1 Like