Working with JSONPath and JavaScript

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

Description

In this page, you will learn how to work with JSONPath and JavaScript.

What is JSONPath

JSONPath is a lightweight library to find and extract sections from a JSON data. It can be used with both JavaScript and PHP.

Obtain JSONPath

To work with JSONPath and JavaScript, you need to download jsonpath.js. You can download it from http://code.google.com/p/jsonpath/.

Once downloaded, you need to include the said js file in your webpage and you are ready to use it.

Syntax:

jsonPath(obj, expr [, args])

Parameters:

Parameter	Description
obj (object\|array)	This parameter represents the Object representing the JSON structure.
expr (string)	This parameter represents JSONPath expression string.
args (object\|undefined)	This parameter represents Object controlling path evaluation and output. As of this writing, only one member is supported.
args.resultType ("VALUE"\|"PATH")	By default, this parameter causes the result to be matching values. Else normalized path expressions.

Return Values

Return value	Description
array	An array comprising either values or normalized path expressions which match the path expression supplied as input.
false	This is returned if no match is found.

Example of using JSONPath with JavaScript

The JSON we will be working with is as follows :

 { "MovieDatabase": {
  "movie": [
         	  { "name":"The Change-Up",
  "genre": "comedy",
  "director": "David Dobkin",
  "Facebook_like": 252
         	  },
         	  { "name":"Rise of the Planet of the Apes",
  "genre": "SciFi",
  "director": "Rupert Wyatt",
  "Facebook_like": 472
         	  },
         	  { "name":"30 Minutes or Less",
  "genre": "adventure",
  "director": "Ruben Fleischer",
  "Facebook_like": 114
         	  },
         	  { "name":"Final Destination 5",
  "genre": "Horror",
  "director": "Steven Quale",
  "Facebook_like": 241
         	  }
         	  ]
         	  }
         	  }

JavaScript Code to find and extract various parts of the above JSON data is as follows (note that since we will be using a method from json.js parser, you need to download and include that too ) :


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript JSONPath example | JSON tutorial | w3resource</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/JSON/json.js"></script>
<script type="text/javascript" src="/JSON/jsonpath.js"></script>
</head>
<body>
<h1>This is an example of JavaScript with JSONPath</h1>
<script type="text/javascript">
         	  var json = { "MovieDatabase": {
  "movie": [ 
         	  { "name":"The Change-Up",
  "genre": "comedy",
  "director": "David Dobkin",
  "Facebook_like": 252
         	  },
         	  { "name":"Rise of the Planet of the Apes",
  "genre": "SciFi",
  "director": "Rupert Wyatt",
  "Facebook_like": 472
         	  },
         	  { "name":"30 Minutes or Less",
  "genre": "adventure",
  "director": "Ruben Fleischer",
  "Facebook_like": 114
         	  },
         	  { "name":"Final Destination 5",
  "genre": "Horror",
  "director": "Steven Quale",
  "Facebook_like": 241
         	  }
         	  ]
         	  }
         	  };
         	  result = "";
         	  result += jsonPath(json, "$.MovieDatabase.movie[*].director").toJSONString() + "<br />";
         	  //find all directors
         	  result += jsonPath(json, "$..director").toJSONString() + "<br />";
         	  //find all directors
         	  result += jsonPath(json, "$.MovieDatabase.*").toJSONString() + "<br />";
         	  //find all movies
         	  result += jsonPath(json, "$.MovieDatabase..Facebook_like").toJSONString() + "<br />";
         	  //find all facebook lies of all the movies
         	  result += jsonPath(json, "$..movie[(@.length-1)]").toJSONString() + "<br />";
         	  //the last movie in data
         	  result += jsonPath(json, "$..movie[-1:]").toJSONString() + "<br />";
         	  //the last movie in data
         	  result += jsonPath(json, "$..movie[0,1]").toJSONString() + "<br />";
         	  //first two movies
         	  result += jsonPath(json, "$..movie[:3]").toJSONString() + "<br />";
         	  //first three movies
         	  result += jsonPath(json, "$..movie[?(@.genre)]").toJSONString() + "<br />";
         	  //all movies with genre
         	  result += jsonPath(json, "$..movie[?(@.Facebook_like>200)]").toJSONString() + "<br />";
         	  //movies with facebook like more that 200
         	  result += jsonPath(json, "$..*").toJSONString() + "\n";
         	  // all members in the JSON document
         	  document.write(result);
  </script>
  </body>
  </html>

Live

JS Bin

View the example of working with JSONPath and JavaScript online.

Previous: Python JSON Module tutorial
Next: Working with JSONPath and PHP