Check out a free preview of the full Organizing JavaScript Functionality course:
The "Calling the API" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Now that Kyle has created a public API for generating a random number, he wants to create a button in the interface to call the API. Kyle also adds a checkbox to determine if the module should be invoked locally or from the server.

Get Unlimited Access Now

Transcript from the "Calling the API" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle Simpson: Let's go to our About.grips.html, we're just going to be silly about this particular page. I'm gonna take out that message stuff that I was doing. In fact let's just take out the partial entirely cuz that's more complexity than we really need right now. But what I do want is I wanna be able to do, I wanna be able to have a button

[00:00:38]
>> Kyle Simpson: That says gimme. We click this button we want it to give us a random number back.
>> Kyle Simpson: I'll give it a little hook that I can use for my JavaScript. I'd like to use the real attributes, some people like ideas, I'm gonna use js-gimme. And then I'm gonna do one other thing in this little element, I'm gonna put in a checkbox

[00:01:25]
>> Kyle Simpson: With a label.
>> Kyle Simpson: And let's start off with our checkbox being checked. So we'll start off by defaulting it to local. So, some just simple basic HTML stuff. Now-
>> Speaker 2: You're returning label with an a.
>> Kyle Simpson: With an a instead of a label, thank you.
>> Kyle Simpson: All right, now, we haven't used any of that code yet, but let's just double-check to make sure I didn't fat finger something.

[00:02:14] Let's refresh our about, and we see, in fact, a local checkbox with a gimme button. It doesn't do anything yet. So how do we make that gimme button do something? While I also have this architecture set up that it will automatically try to load a JavaScript file in the same name as the HTML file that's been loaded, if you have that file existing.

[00:02:36] So if we open up the web>js>pages>index.js file, remember that one that we ended up making back to empty. If you open that one up and it's empty and then we do a Save As and we save that guy as about.js.
>> Kyle Simpson: And the only thing you need to change in here is make sure that the URL that it's mapping itself to is same URL as the page.

[00:03:09] It's just a bunch of conventional stuff. A lot of frameworks use conventions, so I'm using some conventions here. Now my init function is the one that's called after my pages been loaded. Either pages loaded from the server, or if it's been rendered client side through single page app.

[00:03:29] So this is the code where I wanna do my main stuff, I wanna attach an event handler to that gimme button. And I'm gonna use jQuery cuz jQuery is already something that's being loaded and available in my page. So I'm just gonna say $("[rel='gimme']), that's the element that I specified in my template.

[00:03:50]
>> Speaker 2: js-gimme.
>> Kyle Simpson: Then, thank you js-gimme. My touch click handler.
>> Kyle Simpson: And on that click handler I want to then look at the checkbox. So I'm gonna get a reference to the checkbox. What did I call the checkbox? I literally just called it local without the js, that's super confusing I'm sorry.

[00:04:30] So local without the js, let's change that so we don't confuse ourselves. So change it here and change it in your template. So your real value is js-, all right. I'm going to reference to that checkbox and basically if the checkbox is checked. So I'm gonna say if($local.is(":checked")),

[00:04:58]
>> Kyle Simpson: Then I want to invoke the Foo module locally. Now I know I need to load up the Foo module into the browser. So I'm gonna pause here and open up the load.js file.
>> Kyle Simpson: You notice load.js is already set up to load all of my scripts and it's doing it all in parallel and setting things up in the proper orders.

[00:05:22] So I wanna find an appropriate place here for me to load up my foo.js module. So probably towards the bottom cuz it's not being used by anybody else in the stack, so this is probably as good a place as any to load that module in. So I just add in a script call to load the foo.js module.

[00:05:42] This is not terribly that much more different than if you were listing this dependency out in some file and having AMD load it for you. I'm just using script loading instead of module management. So that's all I need to do to make sure that my foo.js module is available to me in the browser.

[00:06:02] So what do I need to do? I need to alert, cuz I'm gonna be real simple about it, just alert(Foo.random())
>> Kyle Simpson: Okay.
>> Kyle Simpson: Now what if it's not checked? If we uncheck that box, what we want to do here is instead of using the local one that's in the browser, we want to make an API call to the server.

[00:06:32] Remember we set up our API route. So here I want to make an API call to the server, which by the way it's gonna use the same Foo module, it's gonna use it in its instance on the server.
>> Kyle Simpson: So I'm going to do a jQuery ajax call and the URL is /Foo.

[00:06:55] And I'm gonna tell it that I wanna give it back to me, I'm not gonna tell that anything so I'm gonna expect that it does the JSON parsing for me cuz jQuery automatically does that. But then I call a .then.
>> Kyle Simpson: And the response that we're getting, just for good measure let's make sure we keep this separate.

[00:07:22] So in my first alert, I'm gonna say that the answer came from local and in this alert I'm gonna say the answer came from remote.
>> Kyle Simpson: Foo.random, we're going to invoke resp.answer.
>> Kyle Simpson: Now obviously we wouldn't, if I wasn't trying to keep things simple we wouldn't be using alert boxes we'd be probably doing something like re-render a template partial in the browser and stuff the answer in there.

[00:07:58] Which is easy to do but I'm just cutting out those sorts of steps to keep things simple. Okay, so this should work now. This is all the steps that are necessary for us to make an ajax call to an API. The last step, I think, is we need to restart our server instance.

[00:08:17] So if you're using an environment where the shell script is working, the shell script will automatically restart the server. Otherwise you might need to use the forever command to kill it first, but this first stops and kills the old server. And then it starts up the new server for us.

[00:08:39]
>> Kyle Simpson: And if I haven't messed anything up hopefully we should be able to load up this page. I'm gonna open the console just in case, in anticipation of me having broken something, which I usually do. Let's try it, let's call the gimme while the local checkbox is still checked.

[00:08:55] And I get an immediate answer from Local. I'm gonna look at my Network tab cuz I wanna verify that if I uncheck the Local box and I call Gimme, it made a FooCall to my server. Which invoked that API route and used the Foo version of the exact or the server version of the exact same Foo module, sent the answer back to me and I got it.

[00:09:24]
>> Kyle Simpson: Now we could have done the Foo module instead of making an API that was just a simpler way for me to illustrate. But a much more realistic way for me to do this is like what I did in the secure phrase site. I set up a route where if the JavaScript was broken and you clicked the submit button on that form, it submitted a page.

[00:09:42] You did a post of those form data and it grabbed a local version of the page, it rendered a local version in the server of that page, and dropped the data right in. That's a much more realistic way of how you use a module in the server versus browsers, invoking with rendering.

[00:09:59] But we've just kept it simple and just done things with alerts.