Manipulate JSON document easily with JMESPath

In my previous project I was struggling to filter a big JSON document to get my desired new array from it. In my struggle to simplify the filtration of JSON Object I have found JMESPath library. I find it really easy to understand and integrate.

JMESPath is a query language for JSON.

There is a GitHub page from where you can download the JMESPath.js file. To integrate it in website just add the .js file. Same way as any other library (ex: same as jQuery, etc…) at the bottom of the page.

Integration

<script src="path/to/jmespath.min.js" charset="utf-8"></script>

Usage

JMESPath has only one method – search that we have to remember to use it. This one function will do all the magic for us.

$.ajax({
   url: "path/to/json-document.json"
}).done(function(data) {
   var obj = jmespath.search(data, "<jmespath expression>");
}

To understand it with below JSON data:

{
    "data": [
        {
            "img": "../assets/images/article/drv8.png",
            "size": "big",
            "type": "video",
            "title": "What to watch for in Q2",
            "imgAlt": "What to watch for in Q2",
            "author": "March 2015",
            "blockCategories": "blue news-analysis market",
            "isSticky": false,
            "hideIcon": false
        },
        {
            "img": "../assets/images/article/sample-01.jpg",
            "size": "big",
            "type": "icon",
            "title": "Performance in the 2014 UN PRI Pilot",
            "imgAlt": null,
            "author": null,
            "blockCategories": "yellow market-insight news",
            "isSticky": false,
            "hideIcon": false
        }
    ]
}

Let’s filter it for the type: "video":

var obj = jmespath.search(data, "data[?type == 'video']");
console.log(obj);

// OUTPUT
[
    {
        "img": "../assets/images/article/drv8.png",
        "size": "big",
        "type": "video",
        "title": "What to watch for in Q2",
        "imgAlt": "What to watch for in Q2",
        "author": "March 2015",
        "blockCategories": "blue news-analysis market",
        "isSticky": false,
        "hideIcon": false
    }
]

If you want to create an array of value just filter it with key:

var obj = jmespath.search(data, "data[*].type");
console.log(obj);

// OUTPUT
["video", "icon"]

You can also create a completely new array out it:

var obj = jmespath.search(data, "data[?size == 'big'].title | sort(@)");
console.log(obj);

// OUTPUT
["What to watch for in Q2", "Performance in the 2014 UN PRI Pilot Assessment"]

You can find a complete tutorial of functionality and expression on their site.

I find this library very useful specifically when you’re dealing with API or JSON Documents. Do let me know your feedback in comment box below.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.