THIS CONTENT IS OUTDATED.  Please view the update version:




In our last post, we built a simple C# application to get all the Pumps in Wichita out of our database.  Today we're going to do that in Javascript.  If you're following along with my code, simply open the attached HTML file in the text editor of your choice.  If you're starting from scratch, just create a new HTML file with the contents here:

<!DOCTYPE html>

<html lang="en" xmlns="">
    <meta charset="utf-8" />
    <title>Wichita Pumps</title>

 Much like last time, the first thing we want to do is add a library that'll help us immensely in the rest of our project.  Within the <head> html element, add a reference to jQuery.  jQuery is a javascript library that makes previously painful Javascript tasks easy. 

<script type="text/javascript" src=""></script>

Now that we have jQuery available, we can start writing our own scripts.  I've created a couple of <script> tags within my HTML head in order to allow myself to code inline.


So like before, one of our first steps is to define some variables to get our URLs set up.  For this purpose, I'm going to include a quick helper method to get myself a .NET-style string format utility in Javascript.  Thanks much to vCampus Team alum Michael van der Veeken for sharing this one with me!  This extends javascript's string type (the 'prototype') to add a format method.

if (!String.prototype.format) {
    String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
            return typeof args[number] != 'undefined'
              ? args[number]
              : match

 So now I can go ahead and declare my commonly used variables within my script tags.  Of course, as always, you'll want to the server and database names to make sense in your own environment:   

        var webApiServer = "your-server-name";
        var afServer = "your-af-server-name";
        var afDatabase = "your-database-name";

        var plantSearchUrlFormat = "http://{0}/piwebapi/pisystems/{1}/databases/{2}/elements?template=Plant&nameFilter={3}";
        var constrainedPumpSearchUrlFormat = "http://{0}/piwebapi/pisystems/{1}/databases/{2}/elements?template=Pump&searchRoot={3}";

        var wichitaPlantSearchUrl = plantSearchUrlFormat.format(webApiServer, afServer, afDatabase, "Wichita");

 Awesome.  Let's make sure this is working correctly.  We'll load up our (currently empty) page in a browser, and check out wichitaPlantSearchUrl in the Javascript console.  Look for this in the Developer Tools in your browser (I use Chrome).




 So far, so good.  Now let's use our jQuery library to actually get some data.  Use the jQuery getJSON function to call this URL, and assign the Wichita Plant's Element ID to a declared variable: 

        var wichitaPlantId;

        $.getJSON(wichitaPlantSearchUrl, function (responseData) {
            wichitaPlantId = responseData.Results[0].Id;

 And let's take a look in our browser, by refreshing the page and then typing wichitaPlantId into the Console.




Great, we're in business.  So how did that actually work, assigning that Element ID to a variable?  Using a callback function, which was the second argument to the getJSON call.  Like the .NET HTTP Client, jQuery's gets operate asynchronously.  The pattern to follow in jQuery is to supply callbacks, which are fired when a response is retrieved.


But we're note done yet, are we?  We want to turn around right away and use that ID to make our second call.  Let's actually chain another JSON call into the callback!  We'll end up with something like this:

        var dummy;

        $.getJSON(wichitaPlantSearchUrl, function (responseData) {
            var wichitaPlantId = responseData.Results[0].Id;
            var wichitaPumpSearchUrl = constrainedPumpSearchUrlFormat.format(webApiServer, afServer, afDatabase, wichitaPlantId);

            $.getJSON(wichitaPumpSearchUrl, function (responseData) {
                dummy = responseData;

 I stuck the dummy variable in there just for debugging purposes.  Now when I take a look in my console, I see Pump data in that dummy variable!




Awesome.  All that's left to do is stick this data into the HTML somewhere.  We can easily create a list, and add Items to it using the DOM.  Within the body of your HTML page, add a List with an ID: 

    <ul id="pumps"></ul>

And modify your second callback to take the results and add them into that DOM element:  

        $.getJSON(wichitaPlantSearchUrl, function (responseData) {
            var wichitaPlantId = responseData.Results[0].Id;
            var wichitaPumpSearchUrl = constrainedPumpSearchUrlFormat.format(webApiServer, afServer, afDatabase, wichitaPlantId);

            $.getJSON(wichitaPumpSearchUrl, function (responseData) {
                var pumpsDomElement = $("#pumps");
                var jqResults = $(responseData.Results);

                jqResults.each(function (index, element)
                    pumpsDomElement.append("<li>" + element.Name + "</li>");

What are we doing here?  In the second callback, we're adding a variable to store a reference to the pumps element in the DOM.  DOM traversal is expensive, so you wouldn't want to make that call for each element in the result list.  Next, we're jQuery-ifying our JSON results, so that we can use the convenient shorthand each function from jQuery, which allows for a function to be executed for each object in the list.  Finally, for each object in the list, we're adding HTML to the DOM node of our list, to have the name of the pump appear as a list item.


Here's our results in the browser!




Thanks for staying tuned.  This concludes our set of basic posts to get you up and running with the PI System Web API in both C# and Javascript.