JSONPath - Building Web Apps Just Got Easier

The Path

The goal in calling a Scripto Web Service is to retrieve results for inclusion in an app of some sort.  It helps to have those results outputted in JSON since it plays well with Javascript.  What if on top of having results in JSON, we had a simple way to select which sections of data we wanted out of those results, and even filter it using a single line of code?

Brought to us by Stefan Goessner ( http://goessner.net/articles/JsonPath ), JSONPath is a script that mirrors the functionality of XPath for XML and allows raw JSON to be traversed with selectors. 

 

 

 

 

 

 

 

By way of comparison, let’s take a look at the usual way of traversing JSON.

The following example JSON could be useful in a fleet management app that is requesting a list of vehicles:
var json = {
    "vehicles": [
        {
            "vin": "VIN234EG433",
            "id": 1687,
            "driver": "bcarter",
            "lat": 42.33677456091482,
            "lng": -71.11523704459228,
            "type": "van",
            "status": "green"
        },
        {
            "vin": "VING03X832A",
            "id": 1681,
            "driver": "bchilson",
            "lat": 42.373308813232626,
            "lng": -71.10871391226806,
            "type": "van",
            "status": "yellow"
        },
        {
            "vin": "VIN7DV9G324",
            "id": 1691,
            "driver": "jsanchez",
            "lat": 42.37229425968112,
            "lng": -71.18287162711181,
            "type": "truck",
            "status": "yellow"
        }
    ]
}
If I wanted the types of all the vehicles, I would loop through the JSON tree:

for (var i=0; i < json.vehicles.length; i++) {
myResultsArray.push(json.vehicles[i].type)
}
Two lines of code so not bad, but the drawback to this approach is that I have to know the exact tree structure in order to access the results I want.  This could become problematic if there is a slight change in the tree structure, such that category is no longer the child node of book.
If I wanted only the vehicles of type "van", I would have to use an if – then statement:
for (var i=0; i < json.vehicles.length; i++) {
if (json.vehicles[i].type== 'van') {
myResultsArray.push(json.vehicles[i])
     }
}

Three lines of code, and I still have to know the tree structure.  For an app that uses JSON in a lot of places, that can become a hassle. 

Now let’s look at the same problem equipped with JSONPath. 

First, select the types of the vehicles:
myResultsArray = jsonPath(json, "$..type")

Second, select all the vehicles of type "van":
myResultsArray = jsonPath(json, "$..vehicles[?(@.type=='van')]")

Only one line of code, and nothing dependent on the tree structure – looks great!  What’s going on here?

The function jsonPath takes two parameters, first the json object and second a string with the search query starting with a dollar sign to represent the root object.  In this case we’ve used the “..” operator to perform a recursive search that looks at each level of the tree to find the named node.  The search returns a JSON array as a string or false if the search fails.  JSONPath can be used again on this output if needed.  It can alternatively return the path to the node rather than the value.

It’s already easy to build a web app on the Axeda Platform using Javascript, but with JSONPath it’s even easier. 

What could you build using JSONPath?

The code for JSONPath is hosted at http://code.google.com/p/jsonpath/