Manipulate JSON document easily with JMESPath

Ashish Panchal

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.


Originally published at ashishuideveloper.in on December 30, 2017.

Ashish Panchal

Written by

Front-end developer and Blogger. Love to learn and share my knowledge; Follow me on my tech blog — http://ashishuideveloper.in

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade