Working with JSONPath and JavaScript
has average rating
6
out of 10.
Total 14 users rated.
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
}
]
}
}
"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>
<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>
View the example of working with JSONPath and JavaScript online.
Practice the example of working with JSONPath and JavaScript online.
