{"info":{"_postman_id":"eab3402a-73ab-4b3d-99c9-62a4bf180e5a","name":"Visualizer - Filter Response Body data using JSONPath","description":"<html><head></head><body><p>The <code>Visualizer</code> feature allows response data to be displayed in a number of different ways. Pulling in external modules expands the capability even further.</p>\n<p>This Collection demonstrates how you can use the <a href=\"https://www.npmjs.com/package/jsonpath\">jsonpath</a>  package, in the Visualize tab, to filter the response JSON data returned in your requests.</p>\n</body></html>","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json","toc":[],"owner":"1794236","collectionId":"eab3402a-73ab-4b3d-99c9-62a4bf180e5a","publishedId":"SWE85HzS","public":true,"customColor":{"top-bar":"FFFFFF","right-sidebar":"303030","highlight":"EF5B25"},"publishDate":"2020-03-29T20:01:53.000Z"},"item":[{"name":"JSONpath Visualizer","event":[{"listen":"test","script":{"id":"8554a734-ae53-4863-81c2-11b5b8ad6ef5","exec":["let template = `","<html>","<head>","    <script src=\"https://cdn.jsdelivr.net/npm/jsonpath@1.0.2/jsonpath.min.js\"></script>","    <script src=\"https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js\"></script>","</head>","<body>","    <div>","      <div>","        <input id=\"filter\" style=\"width:450px;\" type=\"text\" placeholder=\"Example query: $..name.first\">","      </div>","      <div>","        <button id=\"resetButton\" style=\"background-color:red;color:white;\">Reset</button>","        <input id=\"showErrors\" type=\"checkbox\" value=\"1\"/>","        <span class=\"item-text\" style=\"font-family:courier;\">Show Evaluation Errors</span>","      </div>","      <div id=\"errors\" style=\"font-family:courier;color:red;display:none;\"></div>","      <div>","        <p id=\"content\" style=\"font-family:courier;color:green;font-size:18px;\"></p>","      </div>","    </div>","</body>","</html>","","<script>","pm.getData( (error, value) => { ","    const extractedData = jsonpath.query(value, '$');","    ","    $(function() {","        $('#filter').keyup(function() {","            try {","                let filteredData = jsonpath.query(extractedData, $(this).val());","                $(\"#content, #errors\").empty();","                $(\"#content\").append(\"<pre><code>\" + JSON.stringify(filteredData, null, 4) + \"</code></pre>\");","            } catch (err) {","                console.info(err);","                $(\"#errors\").empty();","                $(\"#errors\").append(\"<pre><code>\" + err + \"</code></pre>\");","            }","        });","    });","    ","    $( \"#resetButton\" ).click(function() {","        $(\"#content, #errors\").empty();","        $(\"#filter\").val('');","        $(\"#content\").append(\"<pre><code>\" + JSON.stringify(extractedData, null, 4) + \"</code></pre>\");","    })","})","","$(function() {","  $(\"#showErrors\").on(\"click\",function() {","    $(\"#errors\").toggle(this.checked);","  });","});","</script>`","","pm.visualizer.set(template, pm.response.json())"],"type":"text/javascript"}}],"id":"b1c1129a-217b-4b47-8f7c-743dfd896dc4","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[{"key":"Content-Type","name":"Content-Type","value":"application/json","type":"text"}],"url":"https://randomuser.me/api/?results=5","description":"<h1 id=\"jsonpath-visualizer\">JSONpath Visualizer</h1>\n<p>For this example, we'll be using <a href=\"https://randomuser.me/api\">Randomuser API</a> - This is an API that returns random user data and is perfect for demonstrating the power of JSONpath.</p>\n<p>Once the request has been made and the <code>response body</code> has been returned, switch to the Visualize tab to start using the tool.</p>\n<p>You will be presented with an Input Field to start adding your JSONPath expressions to start filtering the data. The queries will be evaluated in <em>realtime</em> and the filtered data will be presented once a valid query has been made.</p>\n<p><img src=\"https://i.ibb.co/0JgrNdN/Screenshot-2019-12-11-at-22-43-46.png\" alt=\"JSONpath Visualization Tool\" /></p>\n<p>As its evaluated in realtime, there will be parsing <em>errors</em>, these are expected and will be logged to the <em>Visualizer</em> console as info messages. If you also wanted see these as you enter your queries, there is a checkbox available that will display them above the filtered data.</p>\n<p><img src=\"https://i.ibb.co/RHwJK3n/Screenshot-2019-12-11-at-22-44-12.png\" alt=\"JSONpath Visualization Tool Errors\" /></p>\n<hr />\n<h2 id=\"filtering-the-response-data\">Filtering the response data</h2>\n<p>Here are a few <em>basic</em> JSONPath queries that can be used against the Randomuser API:</p>\n<ul>\n<li><code>$..results.length</code></li>\n<li><code>$..name.first</code></li>\n<li><code>$..results[*].dob</code></li>\n</ul>\n<p>The queries above are quite simple but JSONPath gives you the ability to use a number of conditional methods, in the queries, to display the data in a number of different ways.</p>\n<div class=\"click-to-expand-wrapper is-table-wrapper\"><table>\n<thead>\n<tr>\n<th>JSONPath Expression</th>\n<th>What's it doing</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>$..results[?(@.gender == 'female')]</td>\n<td>Gets all the <code>female</code> entries in the results array</td>\n</tr>\n<tr>\n<td>$..results[?(@.dob.age &lt;= 35)]</td>\n<td>Gets any entries that are aged <code>35</code> or lower</td>\n</tr>\n<tr>\n<td>$..results[?(@.name.title == 'Mr')]</td>\n<td>Gets all the entries with the title <em>Mr</em></td>\n</tr>\n</tbody>\n</table>\n</div><hr />\n<h3 id=\"further-jsonpath-instructions\">Further jsonpath instructions</h3>\n<p>A full list of the commands and expressions that can be used are listed <a href=\"https://github.com/dchester/jsonpath#readme\">here</a>.</p>\n","urlObject":{"protocol":"https","path":["api",""],"host":["randomuser","me"],"query":[{"key":"results","value":"5"}],"variable":[]}},"response":[{"id":"f3c975d7-82a4-48ef-a694-e807e54cc57e","name":"Randomuser API Response","originalRequest":{"method":"GET","header":[{"key":"Content-Type","name":"Content-Type","value":"application/json","type":"text"}],"url":{"raw":"https://randomuser.me/api/?results=5","protocol":"https","host":["randomuser","me"],"path":["api",""],"query":[{"key":"results","value":"5"}]}},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Content-Type","value":"application/json; charset=utf-8"}],"cookie":[],"responseTime":null,"body":"{\n    \"results\": [\n        {\n            \"gender\": \"male\",\n            \"name\": {\n                \"title\": \"Mr\",\n                \"first\": \"Mehmet\",\n                \"last\": \"Erginsoy\"\n            },\n            \"location\": {\n                \"street\": {\n                    \"number\": 8914,\n                    \"name\": \"Şehitler Cd\"\n                },\n                \"city\": \"Eskişehir\",\n                \"state\": \"Uşak\",\n                \"country\": \"Turkey\",\n                \"postcode\": 74105,\n                \"coordinates\": {\n                    \"latitude\": \"76.9881\",\n                    \"longitude\": \"-13.4206\"\n                },\n                \"timezone\": {\n                    \"offset\": \"+4:00\",\n                    \"description\": \"Abu Dhabi, Muscat, Baku, Tbilisi\"\n                }\n            },\n            \"email\": \"mehmet.erginsoy@example.com\",\n            \"login\": {\n                \"uuid\": \"a5ae55cb-172e-49b2-a4e3-4dd97eaad533\",\n                \"username\": \"whiteduck372\",\n                \"password\": \"dipper\",\n                \"salt\": \"fBi6KUkA\",\n                \"md5\": \"52f92b903b557d995fd038a857b6942f\",\n                \"sha1\": \"8160e2d3ce665f149877df72383daeb63812cf15\",\n                \"sha256\": \"44a317325212486ba705130161429717690cd2dd774357fb195d3a6f8ea256d9\"\n            },\n            \"dob\": {\n                \"date\": \"1990-03-29T20:59:17.361Z\",\n                \"age\": 29\n            },\n            \"registered\": {\n                \"date\": \"2016-08-30T08:40:14.406Z\",\n                \"age\": 3\n            },\n            \"phone\": \"(496)-683-2212\",\n            \"cell\": \"(405)-189-9732\",\n            \"id\": {\n                \"name\": \"\",\n                \"value\": null\n            },\n            \"picture\": {\n                \"large\": \"https://randomuser.me/api/portraits/men/59.jpg\",\n                \"medium\": \"https://randomuser.me/api/portraits/med/men/59.jpg\",\n                \"thumbnail\": \"https://randomuser.me/api/portraits/thumb/men/59.jpg\"\n            },\n            \"nat\": \"TR\"\n        },\n        {\n            \"gender\": \"female\",\n            \"name\": {\n                \"title\": \"Mrs\",\n                \"first\": \"Leanne\",\n                \"last\": \"Kowalski\"\n            },\n            \"location\": {\n                \"street\": {\n                    \"number\": 1262,\n                    \"name\": \"Lake of Bays Road\"\n                },\n                \"city\": \"Minto\",\n                \"state\": \"Nunavut\",\n                \"country\": \"Canada\",\n                \"postcode\": \"G8B 2T2\",\n                \"coordinates\": {\n                    \"latitude\": \"-67.3676\",\n                    \"longitude\": \"-76.6779\"\n                },\n                \"timezone\": {\n                    \"offset\": \"-10:00\",\n                    \"description\": \"Hawaii\"\n                }\n            },\n            \"email\": \"leanne.kowalski@example.com\",\n            \"login\": {\n                \"uuid\": \"6082defb-4429-4a77-9299-980537a10e06\",\n                \"username\": \"greenswan106\",\n                \"password\": \"383838\",\n                \"salt\": \"cwmCMgb5\",\n                \"md5\": \"bd20b076573fd7bab1d810c91103b19c\",\n                \"sha1\": \"7adf2c87e8f916c5f97a22a7c6e3f6351385f340\",\n                \"sha256\": \"293a652f42f6c3cd6ad8ef4eee748b37455f85b5d4374d4bbd0ee16efdc81210\"\n            },\n            \"dob\": {\n                \"date\": \"1985-11-12T07:42:47.771Z\",\n                \"age\": 34\n            },\n            \"registered\": {\n                \"date\": \"2012-07-29T09:39:49.701Z\",\n                \"age\": 7\n            },\n            \"phone\": \"327-775-3620\",\n            \"cell\": \"631-548-4287\",\n            \"id\": {\n                \"name\": \"\",\n                \"value\": null\n            },\n            \"picture\": {\n                \"large\": \"https://randomuser.me/api/portraits/women/0.jpg\",\n                \"medium\": \"https://randomuser.me/api/portraits/med/women/0.jpg\",\n                \"thumbnail\": \"https://randomuser.me/api/portraits/thumb/women/0.jpg\"\n            },\n            \"nat\": \"CA\"\n        },\n        {\n            \"gender\": \"female\",\n            \"name\": {\n                \"title\": \"Mrs\",\n                \"first\": \"Olivia\",\n                \"last\": \"Larsen\"\n            },\n            \"location\": {\n                \"street\": {\n                    \"number\": 970,\n                    \"name\": \"Klitvej\"\n                },\n                \"city\": \"Vipperød\",\n                \"state\": \"Hovedstaden\",\n                \"country\": \"Denmark\",\n                \"postcode\": 51991,\n                \"coordinates\": {\n                    \"latitude\": \"66.7954\",\n                    \"longitude\": \"-177.5499\"\n                },\n                \"timezone\": {\n                    \"offset\": \"+4:00\",\n                    \"description\": \"Abu Dhabi, Muscat, Baku, Tbilisi\"\n                }\n            },\n            \"email\": \"olivia.larsen@example.com\",\n            \"login\": {\n                \"uuid\": \"c9054ccb-8593-4195-a87c-74db3e03c34f\",\n                \"username\": \"happycat286\",\n                \"password\": \"leader\",\n                \"salt\": \"2VpzjoNa\",\n                \"md5\": \"4361b4063f208341d177806cb27c1e6a\",\n                \"sha1\": \"8061da379ec482a4cfe429ef0c8c7b2eca8257c6\",\n                \"sha256\": \"71f9d0d9605a55cf3b7f0f0118381127c8aaef0269d3d5cf72bc12dd7bcc8d62\"\n            },\n            \"dob\": {\n                \"date\": \"1986-05-04T11:11:50.694Z\",\n                \"age\": 33\n            },\n            \"registered\": {\n                \"date\": \"2016-07-14T23:21:23.968Z\",\n                \"age\": 3\n            },\n            \"phone\": \"90487065\",\n            \"cell\": \"16314531\",\n            \"id\": {\n                \"name\": \"CPR\",\n                \"value\": \"040586-8449\"\n            },\n            \"picture\": {\n                \"large\": \"https://randomuser.me/api/portraits/women/78.jpg\",\n                \"medium\": \"https://randomuser.me/api/portraits/med/women/78.jpg\",\n                \"thumbnail\": \"https://randomuser.me/api/portraits/thumb/women/78.jpg\"\n            },\n            \"nat\": \"DK\"\n        },\n        {\n            \"gender\": \"male\",\n            \"name\": {\n                \"title\": \"Mr\",\n                \"first\": \"Aleksi\",\n                \"last\": \"Kauppila\"\n            },\n            \"location\": {\n                \"street\": {\n                    \"number\": 716,\n                    \"name\": \"Tehtaankatu\"\n                },\n                \"city\": \"Orivesi\",\n                \"state\": \"Finland Proper\",\n                \"country\": \"Finland\",\n                \"postcode\": 85410,\n                \"coordinates\": {\n                    \"latitude\": \"47.7446\",\n                    \"longitude\": \"-18.2149\"\n                },\n                \"timezone\": {\n                    \"offset\": \"+8:00\",\n                    \"description\": \"Beijing, Perth, Singapore, Hong Kong\"\n                }\n            },\n            \"email\": \"aleksi.kauppila@example.com\",\n            \"login\": {\n                \"uuid\": \"9a16f47d-c462-43a0-8623-cdde17dc1a81\",\n                \"username\": \"blackleopard647\",\n                \"password\": \"eatme\",\n                \"salt\": \"7ki1RSIN\",\n                \"md5\": \"79a0effb4405c33627a8078c43ef0415\",\n                \"sha1\": \"9eba1d83d8f9b46afb650c657dd5bbad442fb281\",\n                \"sha256\": \"1bc5f6881a474ee98f693d25bf0c87a017f54c0821bdbd1bd9f1cdf1741547eb\"\n            },\n            \"dob\": {\n                \"date\": \"1983-07-31T23:46:45.064Z\",\n                \"age\": 36\n            },\n            \"registered\": {\n                \"date\": \"2002-08-21T16:21:06.190Z\",\n                \"age\": 17\n            },\n            \"phone\": \"07-501-036\",\n            \"cell\": \"041-773-81-41\",\n            \"id\": {\n                \"name\": \"HETU\",\n                \"value\": \"NaNNA727undefined\"\n            },\n            \"picture\": {\n                \"large\": \"https://randomuser.me/api/portraits/men/8.jpg\",\n                \"medium\": \"https://randomuser.me/api/portraits/med/men/8.jpg\",\n                \"thumbnail\": \"https://randomuser.me/api/portraits/thumb/men/8.jpg\"\n            },\n            \"nat\": \"FI\"\n        },\n        {\n            \"gender\": \"male\",\n            \"name\": {\n                \"title\": \"Mr\",\n                \"first\": \"Lorenzo\",\n                \"last\": \"Guerrero\"\n            },\n            \"location\": {\n                \"street\": {\n                    \"number\": 4553,\n                    \"name\": \"Calle de Arganzuela\"\n                },\n                \"city\": \"Albacete\",\n                \"state\": \"Andalucía\",\n                \"country\": \"Spain\",\n                \"postcode\": 66370,\n                \"coordinates\": {\n                    \"latitude\": \"26.8788\",\n                    \"longitude\": \"-66.5230\"\n                },\n                \"timezone\": {\n                    \"offset\": \"-9:00\",\n                    \"description\": \"Alaska\"\n                }\n            },\n            \"email\": \"lorenzo.guerrero@example.com\",\n            \"login\": {\n                \"uuid\": \"26862c77-f721-44d1-a92d-f22dbb8a5289\",\n                \"username\": \"brownswan804\",\n                \"password\": \"chainsaw\",\n                \"salt\": \"4n87kLJO\",\n                \"md5\": \"255707721809a71f32094f4dab97bac2\",\n                \"sha1\": \"8cb6df48ab5d385061ff0c4ef6c5e4edddc555f7\",\n                \"sha256\": \"8f0a3d2ac7b84d2a76e7ea2c78e4d164bccd35673072f7c66d5f29d7c4594549\"\n            },\n            \"dob\": {\n                \"date\": \"1978-01-02T23:45:26.051Z\",\n                \"age\": 41\n            },\n            \"registered\": {\n                \"date\": \"2008-06-15T15:31:44.324Z\",\n                \"age\": 11\n            },\n            \"phone\": \"963-466-282\",\n            \"cell\": \"677-527-657\",\n            \"id\": {\n                \"name\": \"DNI\",\n                \"value\": \"34983056-J\"\n            },\n            \"picture\": {\n                \"large\": \"https://randomuser.me/api/portraits/men/75.jpg\",\n                \"medium\": \"https://randomuser.me/api/portraits/med/men/75.jpg\",\n                \"thumbnail\": \"https://randomuser.me/api/portraits/thumb/men/75.jpg\"\n            },\n            \"nat\": \"ES\"\n        }\n    ],\n    \"info\": {\n        \"seed\": \"8f43f8dbe4a52951\",\n        \"results\": 5,\n        \"page\": 1,\n        \"version\": \"1.3\"\n    }\n}"}],"_postman_id":"b1c1129a-217b-4b47-8f7c-743dfd896dc4"}],"event":[{"listen":"prerequest","script":{"id":"dd5fdd8f-eefb-4026-bba1-a94f650fdf0b","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"df974d44-96f2-4905-a98b-2a62b74cd1e1","type":"text/javascript","exec":[""]}}]}