{"id":2202,"date":"2020-03-20T13:56:28","date_gmt":"2020-03-20T18:56:28","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2202"},"modified":"2020-03-20T14:16:57","modified_gmt":"2020-03-20T19:16:57","slug":"working-with-third-party-rest-api","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2020\/03\/20\/working-with-third-party-rest-api\/","title":{"rendered":"Working with third-party REST API"},"content":{"rendered":"<p>In the current world situation, all countries track new and existing cases of COVID-19. Some countries provide an API to access the latest data. Here is an <a href=\"https:\/\/data.gov.hk\/en-data\/dataset\/hk-dh-chpsebcddr-novel-infectious-agent\/resource\/d1abc6a0-4453-46a7-a66a-19762c30d81f\">API<\/a> provided by Hong Kong&#8217;s department of health. Today we will learn how to display this data in our own application. Applies to version 10.4 of PHPRunner, ASPRunner.NET and ASPRunnerPro.<\/p>\n<h2>Creating the REST View<\/h2>\n<p>1. Lets see how we can display data for March 2020. We added a filter for &#8216;As of date&#8217; field to show data that contains &#8217;03\/2020&#8242; in this field (they use UK date format). Click &#8216;Get result&#8217; and we will see both API query string and the data it returns. <\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_builder.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_builder-300x127.png\" alt=\"\" width=\"300\" height=\"127\" class=\"alignnone size-medium wp-image-2208\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_builder-300x127.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_builder-768x325.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_builder.png 950w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>2. Now, lets take a look at the URL:<\/p>\n<pre name=\"code\" class=\"sql:nocontrols\">\r\nhttps:\/\/api.data.gov.hk\/v2\/filter?q=%7B%22resource%22%3A%22http%3A%2F%2Fwww.chp.gov.hk%2Ffiles%2Fmisc%2Flatest_situation_of_reported_cases_wuhan_eng.csv%22%2C%22section%22%3A1%2C%22format%22%3A%22json%22%2C%22filters%22%3A%5B%5B1%2C%22ct%22%2C%5B%2203%2F2020%22%5D%5D%5D%7D\r\n<\/pre>\n<p>We can paste it to the web browser and get the same results in JSON fomat. Now it is the time to create a REST connection. The <strong>https:\/\/api.data.gov.hk\/v2\/<\/strong> part of the URL is the main connection URL.<br \/>\n<!--more--><\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_connection.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_connection.png\" alt=\"\" width=\"582\" height=\"419\" class=\"alignnone size-full wp-image-2213\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_connection.png 582w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_connection-300x216.png 300w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/a><\/p>\n<p>3. When setting up the REST View we use the rest of our URL. Now we can run the request, add fields and build the project.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_rest_view.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_rest_view-1024x739.png\" alt=\"\" width=\"810\" height=\"585\" class=\"alignnone size-large wp-image-2211\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_rest_view-1024x739.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_rest_view-300x217.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_rest_view-768x554.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_rest_view.png 1118w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><\/p>\n<p>4. And this is how it looks in the web browser. I just shortened field labels to make it look better.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_view_browser.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_view_browser-1024x655.png\" alt=\"\" width=\"810\" height=\"518\" class=\"alignnone size-large wp-image-2212\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_view_browser-1024x655.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_view_browser-300x192.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_view_browser-768x491.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_view_browser.png 1340w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><\/p>\n<h2>Creating the REST Chart<\/h2>\n<p>1. Now proceed to &#8216;Datasource tables&#8217; screen, right click on our REST View and choose &#8216;Add chart&#8217;. By default it uses the same REST API call and has access to the same dataset. <\/p>\n<p>2. Now we proceed to the chart setup. It is fairly straightforward, just select a few fields to show on the chart.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_setup.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_setup.png\" alt=\"\" width=\"783\" height=\"371\" class=\"alignnone size-full wp-image-2210\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_setup.png 783w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_setup-300x142.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_setup-768x364.png 768w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/a><\/p>\n<p>3. There is one more thing before we are ready to test it in the web browser. Our chart will make more sense if data is sorted by the date. Since this REST API doesn&#8217;t support sorting we will have to do this manually. <\/p>\n<p>Proceed to the REST Chart &#8216;Source&#8217; page, switch to &#8216;PHP mode&#8217;. Most of the code is already generated for us, we just need to insert the following snippet:<\/p>\n<pre name=\"code\" class=\"php:nocontrols\">\r\nif( !$command->order ) {\r\n$command->order[] = array(\"column\" => \"As of date\", \"dir\"=>\"ASC\" );\r\n}\r\n<\/pre>\n<p>Here is how the complete code going to look:<\/p>\n<pre name=\"code\" class=\"php:nocontrols\">\r\n$method = \"GET\";\r\n$url = \"filter?q=%7B%22resource%22%3A%22http%3A%2F%2Fwww.chp.gov.hk%2Ffiles%2Fmisc%2Flatest_situation_of_reported_cases_wuhan_eng.csv%22%2C%22section%22%3A1%2C%22format%22%3A%22json%22%2C%22filters%22%3A%5B%5B1%2C%22ct%22%2C%5B%2203%2F2020%22%5D%5D%5D%7D\";\r\n$url = RunnerContext::PrepareRest( $url );\r\n\r\n\/\/\tdo the API request\r\n$response = $dataSource->getConnection()->requestJson( $url, $method );\r\nif( !$response ) {\r\n\t\/\/\tsomething went wrong\r\n\t$dataSource->setError( $dataSource->getConnection()->lastError() );\r\n\treturn false;\r\n}\r\n\r\n\/\/\tconvert API result into recordset\r\n$rs = $dataSource->resultFromJson( $response, true );\r\n\r\n\/\/ apply search and order parameters\r\nif( !$command->order ) {\r\n$command->order[] = array(\"column\" => \"As of date\", \"dir\"=>\"ASC\" );\r\n}\r\n$rs = $dataSource->filterResult( $rs, $command->filter );\r\n$dataSource->reorderResult( $command, $rs );\r\n\r\n\/\/\tapply pagination\r\n$rs->seekRecord( $command->startRecord );\r\nreturn $rs;\r\n<\/pre>\n<p>4. And this how it looks in the web browser.<\/p>\n<p><a href=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_browser.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_browser-1024x696.png\" alt=\"\" width=\"810\" height=\"551\" class=\"alignnone size-large wp-image-2209\" srcset=\"https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_browser-1024x696.png 1024w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_browser-300x204.png 300w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_browser-768x522.png 768w, https:\/\/xlinesoft.com\/blog\/wp-content\/uploads\/2020\/03\/hk_covid_api_chart_browser.png 1287w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/a><\/p>\n<p>Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the current world situation, all countries track new and existing cases of COVID-19. Some countries provide an API to access the latest data. Here is an API provided by Hong Kong&#8217;s department of health. Today we will learn how to display this data in our own application. Applies to version 10.4 of PHPRunner, ASPRunner.NET and ASPRunnerPro. Creating the REST View 1. Lets see how we can display data for March 2020. We added a filter for &#8216;As of date&#8217; field to show data that&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2020\/03\/20\/working-with-third-party-rest-api\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Working with third-party REST API&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"class_list":["post-2202","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=2202"}],"version-history":[{"count":10,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2202\/revisions"}],"predecessor-version":[{"id":2218,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/2202\/revisions\/2218"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=2202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=2202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=2202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}