Consuming API with jQuery on PhoneGap

Apr 27, 2018 by ohiodn8

Hello, hope you enjoyed the part 1 of consuming API. You may not be interested in using NodeJS – Express (if you’re not yet familiar with it). That is why I have this 2^nd tutorial with frontend technologies you might understand (jQuery and HTML).

In this tutorial, we will be making an API call to the same Jobwater API just like we did in part 1 but with jQuery. Not really with jQuery alone but with PhoneGap supporting the backend. You may be thinking, “why don’t I just create a js file and an HTML file in a folder and get it to work?” Yeah, you could build a static site that way, but for making API calls, a web server is needed, and PhoneGap has a server built in it. If you’re working with the desktop version, there’s a panel to the left of the application, and on there you’ll find an icon that looks like a console. Click on that, and you should see the server log for your running application.

PhoneGap also lets you build mobile apps with HTML CSS and JavaScript, so it’s a great tool to build your mobile application, as well as convert your web apps to mobile application.

For this tutorial, we will be using:

PhoneGap (Desktop version)

jQuery

HTML

API (http://jobwater.herokuapp.com/api/jobs )

Let’s get started

Open up your PhoneGap application and click the plus (+) icon on the panel to the left. 

Click the “Create new PhoneGap Project”, and then “Blank”. Then, click the “Next” button, and you’ll be asked to enter the project detail. For the Local Path, I use my default local path. For the Name, I named mine consumer, and for the ID (which is optional), you can follow the naming convention PhoneGap provides, and then click the “create project” button.

Give it a few seconds, and your PhoneGap app should start up. Click on the local path underneath the Consumer icon (supposing that’s what you called you application) to get to your application file path. You can also click “Server is Running on . . .” link to open your app on the browser. You’ll see a blank page (perfectly fine). 

To the root of our file path, you’ll see a WWW file, open that and in the WWW, there’s an index page. We can include our js script in the index.html page, but we won't be doing that for this tutorial.

Create a js file in the WWW folder, and name it api.js (and now you should have api.js and index.html in the WWW folder).

Open up the index.html file, and  in between the head tag, we will be adding a link to a jQuery library, or if you have it downloaded, point to it, as well as the path to your api.js file.

/consumer/WWW/index.html =>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="api.js"></script>

And in your body tag add:

<div id="api_data"></div>

Now open the api.js (/consumer/WWW/api.js) and lets write some js code in there => 

$(document).ready(function() {
    $.ajax({
      url: "http://jobwater.herokuapp.com/api/jobs"
    }).done(function(data) {
      $('#api_data').append(JSON.stringify(data))
    });
});  

In here, we made a get call using ajax or an ajax call (whatever you decide to call it) to the Jobwater API and sent the data to the index.html using the api_data ID. Save that and return to your running app on the browser (and refresh page if necessary), and you should see the data from Jobwater as json.

And we’re done. Pretty easy, right?!  We’ll be doing the same thing in our part 3 tutorial, and we’ll take it a step further by showing our Jobwater data as a table (rather than in json). We’ll also have links, so you’ll be able to open a single Job, and then a button to take us back to all the job listing. Sounds exciting, right?!

Comments (1)