Creating Custom Consoles Using API Monitor Data

My last post illustrated how you can access API monitor data and display it on a web page. The demonstration software in that post calls the API Science API and displays the response text on a web page. The response from a call to the API Science API is a JSON formatted string, for example:

Presenting raw JSON to a team responsible for monitoring the status and performance of the APIs that are critical for your company’s product is clearly not an option. Rather, if you’d like to create a customized view of your API monitoring, you can call the API Science API, retrieve the raw JSON response, then utilize JavaScript and HTML to provide your team with the information they need in a readily-understandable format.

In this post I illustrate how to accomplish this.


We start out with the same HTML used for displaying the raw JSON data, but we add an HTML div element named formatted_data; this will contain the formatted result of data extracted from the raw JSON. Here’s the updated HTML:

The JavaScript

The task of converting the raw JSON into a format that is easily readable by your API monitor team is accomplished using JavaScript. Here is the revised JavaScript:

The variable resp contains the raw JSON response text, which is displayed beneath the Response Data HTML header, in the div element named monitor_data. But we want our users to be able to clearly see the specific information that enables them to accomplish their job requirements.

So, this JavaScript code creates variables that parse the JSON text returned by the API Science Monitors API into a set of JavaScript object properties that can be displayed as formatted HTML presented within a div element.

In the example case, we make a variable meta_obj that encapsulates the meta portion of the API response text. This provides knowledge of the status of the last API monitor check (success or failure).

The data_obj variable assignment provides access to all the data beneath the JSON response data header. Beneath this, we also extract the summary and templates JavaScript objects.

The templates object is an array. In the example, there is only one template, so we can safely hard-code templates_obj[0] in this case.

Next, we create the JavaScript variable formatted_html, applying simple titles for the data that was extracted from the JSON by the JavaScript.

Then, we append that HTML into the formatted_data div block.

Here’s an example result:

This illustrates how you can use the API Science API and JavaScript to create a customized console or view of your API monitoring for your team. Using the API Science API, you can create an internal site that your team can use to monitor the current status and global availability of your product. If your product suddenly seems unavailable to many of your customers due to any circumstance, your development team needs to know that, so they can respond appropriately. Developing a custom console using JavaScript and the API Science API can enhance your team’s ability to quickly respond to problems.

–Kevin Farnham