您的位置：首页 > Web前端 > JavaScript

Working with JSONPath and JavaScript

2018-01-23 09:54 337 查看

Last update on September 09 2017 06:09:22 (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])

Copy

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
}
]
}
}

Copy

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航