In this page, you will learn how to work with JSONPath and JavaScript.
What is JSONPathJSONPath is a lightweight library to find and extract sections from a JSON data. It can be used with both JavaScript and PHP.
Obtain JSONPathTo 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 JavaScriptThe 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
View the example of working with JSONPath and JavaScript online.
Previous: Python JSON Module tutorial
Next: Working with JSONPath and PHP
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4