How to use API (Quote generator)

JavaScript
1

Ok, i am doing the random quote generator project and all the CSS HTML are done so far, it is currently looking like This.

Now i am going to start using the API to change the quote inside the box to it’s new value, but i don’t have idea hot to use any API, i have seen people using .Ajax , .getJson , .Json and i can’t understand when to use each one. People recommended me using this API: http://forismatic.com/en/api/ but i still have no idea how to get the values to store them in variables, i also don’t understand the syntax (url,function(var))??, can someone help me?

2

I’m no expert, but…

Yes, this is confusing, take a deep breath.

I would recommend spending some time on youtube. There are plenty of videos to explain some of these things.

In short, an API is just an “application programming interface” or a standard for how we can interface with a program, sever, etc.

Specifically to this project, we need an API that tells us how to interface with the forismatic server. Their server has a program running on it that when it is sent a specific string, it will send back a data packet. For example, if I send it https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?, it will send back a quote
data package. You can test it now by opening a new window and putting that string in the address bar. This is sending back a json formatted package. Other formats exist, but json is what we’re using.

So, how do you get this into your Javascript program? AJAX comes to the rescue. It stands for “asynchronous JavaScript and XML” (XML is a different data format, but we’re using json). I find the AJAX command to be a little cumbersome, so I prefer to use JQuery’s function, $.getJSON. (Anytime you see the $ in front, you know that we’re dealing with JQuery.) It is JQuery’s way of doing an AJAX call. There are other ways to do this, but I find $.getJSON to be easier.

Here is the code:

url = "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";

$.getJSON(url, function(data){
  console.log(data);
  $("body").append("<p>" + data.quoteText + " - <i>" + data.quoteAuthor + "</i></p>");
  
  $("body").append("<code>" + JSON.stringify(data, null, '<br/>') + "</code>");
});

You must have JQuery loaded for this to work.

The $.getJSON(url, function(data){ just tells JS to go out to server found at `https://api.forismatic.com’ and send it the string ‘api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?’ which the people have at Forismatic have set up to send back a random json packet with a quote. The url is just the string we defined earlier. The function(data) is an anonymous function we use as a callback to tell it what to do with the data we receive.

Note: All the code that uses data Must be inside (or at least called from inside) that getJSON function. It is AJAX so it is asynchronous meaning that JS will not wait for it to get the data (there will be a delay) so anything not inside that callback function will get run before that data comes back.

3 Likes
3

OK, i think i understand now. I was confused because some people were using .Ajax, some others .getJson and i also did not know how the syntax worked properly. So call the API with the getJSON function because i know that URL will return a JSON, and the full json is stored in var data so i can get the values i want using var.what i want, in this case quoteText and quoteAuthor and then decide what to do with them…

But just to be clear, i need to run this everytime i click the button for a new quote?

4

… some people were using .Ajax, some others .getJson and i also did not know how the syntax worked properly.

They’re doing the same thing. getJson is just JQuery’s easier version.

So call the API with the getJSON function because i know that URL will return a JSON, and the full json is stored in var data so i can get the values i want using var.what i want, in this case quoteText and quoteAuthor and then decide what to do with them…

Yes.

But just to be clear, i need to run this everytime i click the button for a new quote?

If you want a new quote, yes. You are sending a new call to that server asking for a new quote.

1 Like
5

To elaborate on that last statement, I would wrap the getJson and code that puts the quote on the screen in it’s own function. Then you can call that function in you code when the code starts, and again in the click handler for your new quote button.

1 Like
6

Got it,

One more question, .Ajax and getJSON have different syntaxes? So that i can know if i decide to use it in the future… :smiley:

7

They are both JQuery methods of making an API call. (We know they’re Jquery because of the $.)

This is the $.ajax way:

   $.ajax({
      url: "https://someapi.com",
      dataType: 'json',
      data: data,
      success: callback
    });

The $.getJson just makes some assumptions and lets you do it like this:

$.getJSON("https://someapi.com", function( data ) {
...

Here our callback is an anonymous function.

I prefer the getJson format. There may be other more complicated situations where I would want more control like with *$.ajax" but for what we’re doing now, this works fine.

The way to make an api call without JQuery is even uglier - don’t worry about that yet.

2 Likes
8

OK you solved all my questions haha, thank you so much! I’ll try to finish my quote machine now :smiley: