Using JavaScript and JQuery to Access API Monitor Data

The API Science API provides the capability for your custom software to access information about your API monitors. In this post, I provide an example of how you can create a web page that utilizes JQuery and custom JavaScript to bring data about a specific API monitor into a browser’s Document Object Model (DOM).

Once the data has been drawn into the DOM, you have the capability to design your web page such that the data presented suits your organization’s purpose, using AJAX and potentially other protocols.

First, we create an HTML page:

This is a web page that will provide the user with a blank page, since there is no HTML mark-up within the <body> element. But, much more is going on in this page due to the two <script> lines of code.

The “js/jquery-3.2.1.js” line brings the current JQuery JavaScript library into the web page. JQuery is:

a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

The second script utilizes the JQuery Javascript library to access your API Science account and retrieve the information for a specific API monitor.

Here’s the script (with an altered Authorization key, for security):

$.ajax({
  url: "https://api.apiscience.com/v1/monitors/1572022",
  headers: {
    "Authorization" : "Bearer NN_xxxxxxxxxxxx"
  }
}).done(function(data) {
  console.log(data);
});

Here, the script is invoking the JQuery JavaScript script (via $.ajax) to request the information for API Science monitor 1572022, and it’s stating that the returned information should be output on the browser’s console.log page.

Web browsers don’t necessarily have a console log page. For the Firefox browser, the Firebug plug-in provides this capability. With Firebug embedded into your Firefox browser, browsing to this HTML page produces the expected blank web page. But, when you use Firebug to navigate into the DOM, you see:

The user’s web browser DOM contains the data that was requested and retrieved from the API Science monitors API.

Since the information is contained in the browser’s DOM, now all you need to do is to add HTML that will make the information viewable in the manner that best suits your purpose.

Upcoming posts will illustrate how you can accomplish this.

–Kevin Farnham