| Time series for USA | \nTime series for China | \n
|---|---|
![\"\"](\"https://i.imgur.com/Jx0aETc.png\") | \n![\"\"](\"https://i.imgur.com/u2gQ0le.png\") | \n
Let's learn how to visualize data in Postman!
\n| Time series for USA | \nTime series for China | \n
|---|---|
| \n | \n
📽 ️How to visualize data in Postman
\nIf you don't feel like watching the videos, everything that you need is right here in Postman. Follow along with this collection's descriptions for each request in the Postman app.
\n\"](\"https://i.imgur.com/7RiNicS.png\")
Or follow along with the step-by-step tutorial documentation on the web.
\n\"](\"https://i.imgur.com/rA8QHlM.png\")
Under the Pre-request Script and Tests tabs, you can add JavaScript code before the request is sent and after the response is received, respectively. Postman will run this code in the Postman Sandbox environment, which also gives you access to some in-built functions that we'll explore in a bit. This code that runs before or after your request is called a script in Postman.
\nOpen the Postman console using the bottom left icon. Send this request, and see the execution order of your main network request in relation to the pre-request and test scripts.
\n![\"[screenshot](\"https://i.imgur.com/8LplWV2.png\")
Let's use the Postman docs to learn how to visualize our response data.
\nUnder the Tests tab, add this code to set the visualizer.
\n// Set visualizer\npm.visualizer.set(template, {\n // Pass the response body parsed as JSON as `data`\n response: pm.response.json()\n});\nThe pm object contains a bunch of information and functions related to the script being executed. It's available in the Postman Sandbox that we talked about in the previous step.
\nIn this example, we're using the pm.visualizer.set() method to apply the visualizer code that we will write in the next step, and then display it in the Visualize tab of our response after we run the request. This method takes three parameters.
Let's dig into these parameters in the next steps.
\nDon't hit Send yet!
\n","urlObject":{"protocol":"https","path":["api","v1","country","USA"],"host":["covidapi","info"],"query":[],"variable":[]}},"response":[{"id":"a16fa60e-bc68-4418-967c-0159f83e6bdd","name":"Country specific historic data","originalRequest":{"method":"GET","header":[],"url":"https://covidapi.info/api/v1/country/IND"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"nginx/1.14.0 (Ubuntu)"},{"key":"Date","value":"Sun, 22 Mar 2020 07:46:33 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Transfer-Encoding","value":"chunked"},{"key":"Connection","value":"keep-alive"},{"key":"Vary","value":"Accept-Encoding"},{"key":"Expires","value":"Sun, 22 Mar 2020 15:46:33 GMT"},{"key":"Cache-Control","value":"max-age=28800"},{"key":"Content-Encoding","value":"gzip"}],"cookie":[],"responseTime":null,"body":"{\n \"count\": 59,\n \"result\": {\n \"2020-01-22\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-23\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-24\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-25\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-26\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-27\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-28\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-29\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-30\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-31\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-01\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-02\": {\n \"confirmed\": 2,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-03\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-04\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-05\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-06\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-07\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-08\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-09\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-10\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-11\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-12\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-13\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-14\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-15\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-16\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-17\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-18\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-19\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-20\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-21\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-22\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-23\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-24\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-25\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-26\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-27\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-28\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-29\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-01\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-02\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-03\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-04\": {\n \"confirmed\": 28,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-05\": {\n \"confirmed\": 30,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-06\": {\n \"confirmed\": 31,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-07\": {\n \"confirmed\": 34,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-08\": {\n \"confirmed\": 39,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-09\": {\n \"confirmed\": 43,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-10\": {\n \"confirmed\": 56,\n \"deaths\": 0,\n \"recovered\": 4\n },\n \"2020-03-11\": {\n \"confirmed\": 62,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-12\": {\n \"confirmed\": 73,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-13\": {\n \"confirmed\": 82,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-14\": {\n \"confirmed\": 102,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-15\": {\n \"confirmed\": 113,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-16\": {\n \"confirmed\": 119,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-17\": {\n \"confirmed\": 142,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-18\": {\n \"confirmed\": 156,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-19\": {\n \"confirmed\": 194,\n \"deaths\": 4,\n \"recovered\": 15\n },\n \"2020-03-20\": {\n \"confirmed\": 244,\n \"deaths\": 5,\n \"recovered\": 20\n }\n }\n}"}],"_postman_id":"6869081e-06cd-4bf2-8b58-8ad1744e6082"},{"name":"Step 3: add the layout","event":[{"listen":"test","script":{"id":"bac79026-dfbd-4ff2-9a29-35897888e6ae","exec":["// add a template string of the front-end view we want to render","let template = `","Oh, hey I'm inside the template now!!👋
","`;","","// Set visualizer","pm.visualizer.set(template, {"," // Pass the response body parsed as JSON as `data`"," response: pm.response.json()","});",""],"type":"text/javascript"}},{"listen":"prerequest","script":{"id":"a77e94ed-7b66-461b-a8b3-cc79cf2ad435","exec":[""],"type":"text/javascript"}}],"id":"b14dcff0-fa99-410d-9f52-917407b3eb24","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"body":{"mode":"raw","raw":""},"url":"https://covidapi.info/api/v1/country/USA","description":"We're still using the Postman docs to learn how to visualize our response data. Now that we've added pm.visualizer.set() under the Tests tab, let's take a look at the first (and only required) parameter.
\n\n\n
layout- (required) an HTML template string of the front-end view we want to render
In our example code, we see a placeholder template as the first parameter in pm.visualizer.set(). We haven't initialized that variable yet. Above this code, add a variable called template as an empty string.
let template = ``;\n\n// Set visualizer\npm.visualizer.set(template, {\n // Pass the response body parsed as JSON as `data`\n response: pm.response.json()\n});\nInside the template string, add some HTML elements like header, text, or an image.
\nHit Send, and take a look at the Visualize tab of our response after we run the request. You should see something like this.
\n![\"[screenshot](\"https://i.imgur.com/ct7cYtB.png\")
This is good, but we haven't passed any data to our template yet. Let's forge ahead!
\n","urlObject":{"protocol":"https","path":["api","v1","country","USA"],"host":["covidapi","info"],"query":[],"variable":[]}},"response":[{"id":"c39b505d-f866-4bdd-bc77-9acfa00d13fe","name":"Country specific historic data","originalRequest":{"method":"GET","header":[],"url":"https://covidapi.info/api/v1/country/IND"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"nginx/1.14.0 (Ubuntu)"},{"key":"Date","value":"Sun, 22 Mar 2020 07:46:33 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Transfer-Encoding","value":"chunked"},{"key":"Connection","value":"keep-alive"},{"key":"Vary","value":"Accept-Encoding"},{"key":"Expires","value":"Sun, 22 Mar 2020 15:46:33 GMT"},{"key":"Cache-Control","value":"max-age=28800"},{"key":"Content-Encoding","value":"gzip"}],"cookie":[],"responseTime":null,"body":"{\n \"count\": 59,\n \"result\": {\n \"2020-01-22\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-23\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-24\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-25\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-26\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-27\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-28\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-29\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-30\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-31\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-01\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-02\": {\n \"confirmed\": 2,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-03\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-04\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-05\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-06\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-07\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-08\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-09\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-10\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-11\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-12\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-13\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-14\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-15\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-16\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-17\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-18\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-19\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-20\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-21\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-22\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-23\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-24\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-25\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-26\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-27\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-28\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-29\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-01\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-02\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-03\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-04\": {\n \"confirmed\": 28,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-05\": {\n \"confirmed\": 30,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-06\": {\n \"confirmed\": 31,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-07\": {\n \"confirmed\": 34,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-08\": {\n \"confirmed\": 39,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-09\": {\n \"confirmed\": 43,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-10\": {\n \"confirmed\": 56,\n \"deaths\": 0,\n \"recovered\": 4\n },\n \"2020-03-11\": {\n \"confirmed\": 62,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-12\": {\n \"confirmed\": 73,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-13\": {\n \"confirmed\": 82,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-14\": {\n \"confirmed\": 102,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-15\": {\n \"confirmed\": 113,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-16\": {\n \"confirmed\": 119,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-17\": {\n \"confirmed\": 142,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-18\": {\n \"confirmed\": 156,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-19\": {\n \"confirmed\": 194,\n \"deaths\": 4,\n \"recovered\": 15\n },\n \"2020-03-20\": {\n \"confirmed\": 244,\n \"deaths\": 5,\n \"recovered\": 20\n }\n }\n}"}],"_postman_id":"b14dcff0-fa99-410d-9f52-917407b3eb24"},{"name":"Step 4: pass the data","event":[{"listen":"test","script":{"id":"bac79026-dfbd-4ff2-9a29-35897888e6ae","exec":["// add a template string of the front-end view we want to render","let template = `"," {{#each response.result}}"," {{@key}}We're still using the Postman docs to learn how to visualize our response data. Now that we've added pm.visualizer.set() and defined an initial layout for our front-end view, let's take a look at the second parameter.
\n\n\n
data- (optional) data object that you can bind to the template; the properties of this object can be accessed in the template
In our example code, we see a placeholder for the second parameter in pm.visualizer.set(). Once again, we are using the pm object in the Postman Sandbox. This time, pm.response.json() captures the response returned from the API so we can parse the response body as JSON.
pm.visualizer.set(template, {\n // Pass the response body parsed as JSON as `data`\n response: pm.response.json()\n});\nIn the string template where we define our front-end layout, the Handlebars templating engine is built in to help us render the data returned from our API. Use the double curly braces to wrap a Handlebars expression like {{expression}}.
This is what our data looks like coming back from our API.
\n![\"[screenshot](\"https://i.imgur.com/puwCfwz.png\")
For this example, use Handlebars each in our template string to loop through each item of the response body. We are looping through response.result because response is the property name we used in pm.visualizer.set() and result is the property name from the response body returned from our API. Use Handlebars {{@key}} to reference the current key name, which will be a date. And then add an HTML line break tag <br> to list each date on a new line.
let template = `\n {{#each response.result}}\n {{@key}} <br>\n {{/each}}\n`;\nHit Send, and take a look at the Visualize tab of our response. You should see something like this.
\n![\"[screenshot](\"https://i.imgur.com/O5gliOm.png\")
This is progress, but if you're a front-end developer or designer, you're probably thinking - oh how ugly! Let's keep going.
\n","urlObject":{"protocol":"https","path":["api","v1","country","USA"],"host":["covidapi","info"],"query":[],"variable":[]}},"response":[{"id":"169d808a-1933-4f2b-b48a-431c34a5b299","name":"Country specific historic data","originalRequest":{"method":"GET","header":[],"url":"https://covidapi.info/api/v1/country/IND"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"nginx/1.14.0 (Ubuntu)"},{"key":"Date","value":"Sun, 22 Mar 2020 07:46:33 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Transfer-Encoding","value":"chunked"},{"key":"Connection","value":"keep-alive"},{"key":"Vary","value":"Accept-Encoding"},{"key":"Expires","value":"Sun, 22 Mar 2020 15:46:33 GMT"},{"key":"Cache-Control","value":"max-age=28800"},{"key":"Content-Encoding","value":"gzip"}],"cookie":[],"responseTime":null,"body":"{\n \"count\": 59,\n \"result\": {\n \"2020-01-22\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-23\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-24\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-25\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-26\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-27\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-28\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-29\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-30\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-31\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-01\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-02\": {\n \"confirmed\": 2,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-03\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-04\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-05\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-06\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-07\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-08\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-09\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-10\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-11\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-12\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-13\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-14\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-15\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-16\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-17\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-18\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-19\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-20\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-21\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-22\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-23\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-24\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-25\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-26\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-27\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-28\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-29\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-01\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-02\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-03\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-04\": {\n \"confirmed\": 28,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-05\": {\n \"confirmed\": 30,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-06\": {\n \"confirmed\": 31,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-07\": {\n \"confirmed\": 34,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-08\": {\n \"confirmed\": 39,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-09\": {\n \"confirmed\": 43,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-10\": {\n \"confirmed\": 56,\n \"deaths\": 0,\n \"recovered\": 4\n },\n \"2020-03-11\": {\n \"confirmed\": 62,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-12\": {\n \"confirmed\": 73,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-13\": {\n \"confirmed\": 82,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-14\": {\n \"confirmed\": 102,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-15\": {\n \"confirmed\": 113,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-16\": {\n \"confirmed\": 119,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-17\": {\n \"confirmed\": 142,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-18\": {\n \"confirmed\": 156,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-19\": {\n \"confirmed\": 194,\n \"deaths\": 4,\n \"recovered\": 15\n },\n \"2020-03-20\": {\n \"confirmed\": 244,\n \"deaths\": 5,\n \"recovered\": 20\n }\n }\n}"}],"_postman_id":"7364c669-5b59-49da-bb8f-ec3f78698a65"},{"name":"Step 5: make it pretty","event":[{"listen":"test","script":{"id":"bac79026-dfbd-4ff2-9a29-35897888e6ae","exec":["// add a template string of the front-end view we want to render","let template = `"," ",""," {{#each response.result}}","{{@key}}
"," {{/each}}","`;","","// Set visualizer","pm.visualizer.set(template, {"," // Pass the response body parsed as JSON as `data`"," response: pm.response.json()","});",""],"type":"text/javascript"}},{"listen":"prerequest","script":{"id":"a77e94ed-7b66-461b-a8b3-cc79cf2ad435","exec":[""],"type":"text/javascript"}}],"id":"714e6626-b5b1-45e0-bec2-f34a3fa0735d","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"body":{"mode":"raw","raw":""},"url":"https://covidapi.info/api/v1/country/USA","description":"We're still using the Postman docs to learn how to visualize our response data. We have a functioning visualization, but it's not very pretty and it's not very useful yet. So far, we've added a tiny bit of JavaScript and HTML to our layout template. There's a couple more steps we could take to really polish it up.
\n<style> tags or <link> to external stylesheets from within your template<script> tags inside your templateLet's go ahead and add some HTML and CSS to our template string. In this example, I added paragraph tags <p>, and then CSS within <style> tags to style my paragraph elements. Hit Send, and see how our visualization has changed.
![\"[screenshot](\"https://i.imgur.com/p4DVbeM.png\")
Do you feel pretty?
\nRight-click on the visualization, and select Inspect visualization to open Developer Tools. In this new window, you can inspect elements in your HTML visualization, log console statements from within the defined template, and dig deeper into what's going on.
\nUnder the Elements tab of the Developer Tools, select an HTML element and update the CSS under Styles to see real-time updates to the HTML rendered under the Visualize tab in Postman.
\n![\"[screenshot](\"https://i.imgur.com/npgUJ9D.png\")
Neat, huh? Let's try adding more JavaScript next.
\n","urlObject":{"protocol":"https","path":["api","v1","country","USA"],"host":["covidapi","info"],"query":[],"variable":[]}},"response":[{"id":"17e9bc39-65c4-49cc-8c44-d94b4daab3d2","name":"Country specific historic data","originalRequest":{"method":"GET","header":[],"url":"https://covidapi.info/api/v1/country/IND"},"status":"OK","code":200,"_postman_previewlanguage":"json","header":[{"key":"Server","value":"nginx/1.14.0 (Ubuntu)"},{"key":"Date","value":"Sun, 22 Mar 2020 07:46:33 GMT"},{"key":"Content-Type","value":"application/json"},{"key":"Transfer-Encoding","value":"chunked"},{"key":"Connection","value":"keep-alive"},{"key":"Vary","value":"Accept-Encoding"},{"key":"Expires","value":"Sun, 22 Mar 2020 15:46:33 GMT"},{"key":"Cache-Control","value":"max-age=28800"},{"key":"Content-Encoding","value":"gzip"}],"cookie":[],"responseTime":null,"body":"{\n \"count\": 59,\n \"result\": {\n \"2020-01-22\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-23\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-24\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-25\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-26\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-27\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-28\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-29\": {\n \"confirmed\": 0,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-30\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-01-31\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-01\": {\n \"confirmed\": 1,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-02\": {\n \"confirmed\": 2,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-03\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-04\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-05\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-06\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-07\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-08\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-09\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-10\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-11\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-12\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-13\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-14\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-15\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 0\n },\n \"2020-02-16\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-17\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-18\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-19\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-20\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-21\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-22\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-23\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-24\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-25\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-26\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-27\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-28\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-02-29\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-01\": {\n \"confirmed\": 3,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-02\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-03\": {\n \"confirmed\": 5,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-04\": {\n \"confirmed\": 28,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-05\": {\n \"confirmed\": 30,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-06\": {\n \"confirmed\": 31,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-07\": {\n \"confirmed\": 34,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-08\": {\n \"confirmed\": 39,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-09\": {\n \"confirmed\": 43,\n \"deaths\": 0,\n \"recovered\": 3\n },\n \"2020-03-10\": {\n \"confirmed\": 56,\n \"deaths\": 0,\n \"recovered\": 4\n },\n \"2020-03-11\": {\n \"confirmed\": 62,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-12\": {\n \"confirmed\": 73,\n \"deaths\": 1,\n \"recovered\": 4\n },\n \"2020-03-13\": {\n \"confirmed\": 82,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-14\": {\n \"confirmed\": 102,\n \"deaths\": 2,\n \"recovered\": 4\n },\n \"2020-03-15\": {\n \"confirmed\": 113,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-16\": {\n \"confirmed\": 119,\n \"deaths\": 2,\n \"recovered\": 13\n },\n \"2020-03-17\": {\n \"confirmed\": 142,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-18\": {\n \"confirmed\": 156,\n \"deaths\": 3,\n \"recovered\": 14\n },\n \"2020-03-19\": {\n \"confirmed\": 194,\n \"deaths\": 4,\n \"recovered\": 15\n },\n \"2020-03-20\": {\n \"confirmed\": 244,\n \"deaths\": 5,\n \"recovered\": 20\n }\n }\n}"}],"_postman_id":"714e6626-b5b1-45e0-bec2-f34a3fa0735d"},{"name":"Step 6: make a line graph","event":[{"listen":"test","script":{"id":"bac79026-dfbd-4ff2-9a29-35897888e6ae","exec":["// add a template string of the front-end view we want to render","let template = `"," "," "," ","`;","","// Set visualizer","pm.visualizer.set(template, {"," // Pass the response body parsed as JSON as `data`"," response: pm.response.json()","});",""],"type":"text/javascript"}},{"listen":"prerequest","script":{"id":"a77e94ed-7b66-461b-a8b3-cc79cf2ad435","exec":[""],"type":"text/javascript"}}],"id":"bdbefa32-b68a-4d27-9f29-35c5e5c3b7c6","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"body":{"mode":"raw","raw":""},"url":"https://covidapi.info/api/v1/country/USA","description":"We're still using the Postman docs to learn how to visualize our response data. We just learned how to style our visualization using HTML and CSS. Now, let's add some more JavaScript to add interactions or external libraries using <script> tags inside our template.
If we revisit the data returned from our API, it would definitely be more interesting to visualize data over time, instead of this lovely but meaningless list of dates.
\n
To do this, we'll use the Chart.js library to make a line graph. Let's take a look at their getting started documentation.
\n\n\nFirst, we need to have a canvas in our page. Replace the current code in your template string with this HTML element.
\n
<canvas id=\"myChart\"></canvas>\n\n\nNow that we have a canvas we can use, we need to include Chart.js in our page. Add this script to the beginning part of your template string.
\n
<script src=\"https://cdn.jsdelivr.net/npm/chart.js@2.8.0\"></script>\n\n\nNow, we can create a chart. Add this script after your canvas element within your template string. Don't forget to surround this code block with an opening and closing
\n<script>tag.
var ctx = document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n\n // The data for our dataset\n data: {\n labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n datasets: [{\n label: 'My First dataset',\n backgroundColor: 'rgb(255, 99, 132)',\n borderColor: 'rgb(255, 99, 132)',\n data: [0, 10, 5, 2, 20, 30, 45]\n }]\n },\n\n // Configuration options go here\n options: {}\n});\nIf you hit Send now, you can see a line chart under the Visualize tab that displays the data that's hard coded in the boilerplate snippet. In Step 4, we learned how to pass the data from pm.visualizer.set() to access the data within our HTML template using the Handlebars double curly braces. If we want to access this data from within a JavaScript <script>, we can use pm.getData(callback).
The pm.getData(callback) method takes a callback function as its parameter. This callback method accepts two parameters: error and data. The second parameter is the data that was passed through pm.visualizer.set(). Wrap this bit of code around the boilerplate snippet (still inside the <script> tags).
pm.getData( function (error, data) {\n <! Boilerplate JS to execute using the data passed through from `pm.visualizer.set()` ---->\n}\nNow we have access to the data passed through from pm.visualizer.set(). In the boilerplate, we need to update labels for our data, as well as label and data for our datasets. Once again, we will parse the information passed through from pm.visualizer.set().
Chart.js expects the labels for our data and the data for our dataset to be formatted as arrays. So the label would be a date like \"2020-01-22\", and the data for the dataset would be the corresponding value for that date.
Update the array for the labels of our data. Here we are turning an object data.response.result into an array using Object.entries(), and then mapping each item in that array to return another array of the first property of each item. See if you can update label and data for our datasets on your own.
...\nlabels: Object.entries(data.response.result).map( (item) => item[0]),\n...\nHit Send, and see the time series data for COVID cases under the Visualize tab of the response.
\n![\"[screenshot](\"https://i.imgur.com/PGzdar5.png\")
Note: the API used in these examples is from this other collection using this dataset converted here and hosted on this API.
\n","event":[{"listen":"prerequest","script":{"id":"f6feb721-1167-43d5-882c-38c72077d2dc","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"91469a1a-5301-41fa-8ae3-10e50db47f1a","type":"text/javascript","exec":[""]}}],"_postman_id":"5e743958-a52a-45a8-a2eb-f45a0d9b577a"},{"name":"Next steps","item":[{"name":"Add ISO variable","event":[{"listen":"test","script":{"id":"bac79026-dfbd-4ff2-9a29-35897888e6ae","exec":["// add a template string of the front-end view we want to render","let template = `"," "," "," ","`;","","// Set visualizer","pm.visualizer.set(template, {"," // Pass the response body parsed as JSON as `data`"," response: pm.response.json(),"," title: `COVID timeseries data for ${pm.variables.get(\"ISO\")}`","});",""],"type":"text/javascript"}},{"listen":"prerequest","script":{"id":"c3e6a260-92b7-4519-b32a-cd0ea16c6755","exec":["// There's a bunch of ways to retrieve or save the country's ISO code as a variable","// https://learning.postman.com/docs/postman/variables-and-environments/variables/","// One option is to set a local variable to be used in this request or during a collection run","pm.variables.set(\"ISO\", \"CHN\");",""],"type":"text/javascript"}}],"id":"3e694240-4552-496b-bf45-e0d61dc62b48","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"body":{"mode":"raw","raw":""},"url":"https://covidapi.info/api/v1/country/{{ISO}}","description":"Turn the country's ISO in the URL and chart label into a variable
\nThe country names are as per ISO 3166 standards.\nExamples:
\nThe Postman Console is a great way to debug and validate your assumptions. Every request sent via Postman is logged in this console, as well as any log statements from within your scripts. Open the Postman Console using the icon in the bottom left, hit Send to see what happens.
\n![\"[screenshot](\"https://i.imgur.com/uWcigTj.png\")
The Developer Tools also has a console that you can use for more visibility into the HTML visualized under the Visualize tab. This helps us debug what's going on within the template string. Under the Visualize tab, right-click on the HTML rendered, and select Inspect visualization. Look under the Console tab to see your console logs.
\n![\"[screenshot](\"https://i.imgur.com/1NxWTnl.png\")
Now that we've walked through the preceding folder Get Started, we can continue exploring some enhancements, as well as tips for troubleshooting.
\nIdeas for next steps:
\n