{"id":4015,"date":"2018-07-26T20:07:14","date_gmt":"2018-07-26T20:07:14","guid":{"rendered":"https:\/\/max-drake.cc\/?p=4015"},"modified":"2018-07-30T20:54:46","modified_gmt":"2018-07-30T20:54:46","slug":"api-4-tests","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=4015","title":{"rendered":"API 4. Some tests with different API&#8217;s"},"content":{"rendered":"<p><img decoding=\"async\" class=\"size-full wp-image-4065 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im86.jpg\" alt=\"\" width=\"758\" height=\"235\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im86.jpg 758w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im86-300x93.jpg 300w\" data-sizes=\"(max-width: 758px) 100vw, 758px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 758px; --smush-placeholder-aspect-ratio: 758\/235;\" \/><\/p>\n<p>The above image is for LinkedIn viewers as the API doesn&#8217;t seem to fire when viewed from linkedIn. <a href=\"https:\/\/max-drake.cc\/2018\/07\/26\/api-4-tests\/\" target=\"_blank\" rel=\"noopener\">Go here to see web page where the API displays the information.<\/a><\/p>\n<p>There is also an Extended page with weather &amp; forecast for Wellington, NZ, London, UK &amp; Boston, Ma, USA. <a href=\"https:\/\/pir2.tk\/index.php\/yahoo-weather-api\/\" target=\"_blank\" rel=\"noopener\"><strong>Find it here<\/strong><\/a>.<\/p>\n<h3>Output from API Call<\/h3>\n<p><script>\n  var callbackFunction = function(data) {\n    var wind = data.query.results.channel.wind;\n    var dateTime= data.query;\ndocument.write(\"Date\/Time of information = \" + dateTime.created.bold());\ndocument.write(\"<br \/>Wind Chill in Boston MA now in Fahrenheit = \" + wind.chill.bold());\ndocument.write(\"<br \/>Wind Direction in Boston MA now in degrees [0 degrees =North] = \" + wind.direction.bold());\ndocument.write(\"<br \/>Wind Direction in Boston MA now in MPH = \" + wind.speed.bold());\n  }\n<\/script><\/p>\n<p><script src=\"https:\/\/query.yahooapis.com\/v1\/public\/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text='boston, ma')&amp;format=json&amp;callback=callbackFunction\">\n<\/script><\/p>\n<p>The API GET call output above is created from the script below (<em>note leading &lt; deleted so it shows as text, correct Javascript code written below<\/em>) . On opening this web page the Javascript runs and a query to yahooapis.com gets weather data about Boston Massachusetts. It then displays the data&nbsp; on the screen using the javascript document.write() function. This is an example on the Yahoo website <a href=\"https:\/\/developer.yahoo.com\/weather\/\" target=\"_blank\" rel=\"noopener\"><strong>here<\/strong><\/a>.<\/p>\n<p>You open your page and it updates with the latest information. This could possibly be combined with the <a href=\"https:\/\/max-drake.cc\/2018\/06\/12\/datatables-for-dynamic-database-queries-for-tables-on-web-pages-export-tools\/\" target=\"_blank\" rel=\"noopener\"><strong>dataTables<\/strong><\/a> to pull the latest data from an API and display it in a tabular manner.<\/p>\n<p>script&gt;<br \/>\nvar callbackFunction = function(data) {<br \/>\nvar wind = data.query.results.channel.wind;<br \/>\nvar dateTime= data.query;<br \/>\n<em>document.write(&#8220;Date\/Time of information = &#8220;+ dateTime.created.bold());<\/em><br \/>\n<em>document.write(dateTime.created);<\/em><br \/>\n<em>document.write(&#8220;<\/em><br \/>\n<em>&#8220;);<\/em><br \/>\n<em>document.write(&#8220;Wind Chill in Boston MA now in Fahrenheit = &#8220;);<\/em><br \/>\n<em>document.write(wind.chill);<\/em><br \/>\n<em>document.write(&#8221;<br \/>\n&#8220;);<\/em><br \/>\n<em>document.write(&#8220;Wind Direction in Boston MA now in degrees [0 =N,90=E,180=S,270=W] = &#8220;);<\/em><br \/>\n<em>document.write(wind.direction);<\/em><br \/>\n<em>document.write(&#8221;<br \/>\n&#8220;);<\/em><br \/>\n<em>document.write(&#8220;Wind Direction in Boston MA now in MPH = &#8220;);<\/em><br \/>\n<em>document.write(wind.speed);<\/em><\/p>\n<p>document.write(&#8220;Wind Direction in Boston MA now in degrees [0 degrees =North] = &#8220;);<br \/>\ndocument.write(wind.direction);<\/p>\n<p>document.write(&#8220;Wind Direction in Boston MA now in MPH = &#8220;);<br \/>\ndocument.write(wind.speed);<br \/>\n};<br \/>\n\/script&gt;<\/p>\n<p>script&gt; &lt;src=&#8221;https:\/\/query.yahooapis.com\/v1\/public\/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text=&#8217;boston, ma&#8217;)&amp;format=json&amp;callback=callbackFunction&#8221;&gt; \/script&gt;<\/p>\n<h4>Postman view of the Get request to the API<\/h4>\n<p>This is the Postman view of the Get Request. Interesting that a JSON format was requested but an XML output in the bottom pane.&nbsp; The original Javascript only had the wind&nbsp; &#8220;Chill&#8221; and I decided to add the wind &#8220;direction&#8221; and &#8220;speed&#8221; as the data was available. Also I added the date\/time to display too.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4034 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im79-1024x600.jpg\" alt=\"\" width=\"1515\" height=\"887\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im79-1024x600.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im79-300x176.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im79-768x450.jpg 768w\" data-sizes=\"(max-width: 1515px) 100vw, 1515px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1515px; --smush-placeholder-aspect-ratio: 1515\/887;\" \/><\/p>\n<p>I quite like this process as you get the data in a JSON or XML format and use Javascript to display the information on your page. JavaScript is doing the post-processing from the Get request. Much better than converting the JSON to CSV then on to something else. And it displays on the page nicely, although I think I need to investigate how to format the data in a better manner. The great thing is all the processing is done within the web page.<\/p>\n<h2>NIWA data<\/h2>\n<p>NIWA is the National Institute of Water and Atmospheric Research. We\u2019re New Zealand\u2019s leading supplier of atmospheric, freshwater, environmental and marine science services.<\/p>\n<p>So I joined their service to get information from their site. This is more like a DataBase Query process rather than an API .<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4046 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im80-1024x600.jpg\" alt=\"\" width=\"1457\" height=\"853\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im80-1024x600.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im80-300x176.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im80-768x450.jpg 768w\" data-sizes=\"(max-width: 1457px) 100vw, 1457px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1457px; --smush-placeholder-aspect-ratio: 1457\/853;\" \/><\/p>\n<p>You can export the data as Excel, HTML, Tab or space delimeted files. So really just a straight Search &amp; Download from a database, even though its on the https:\/\/www.programmableweb.com\/ as an API.<\/p>\n<h2><img decoding=\"async\" class=\"wp-image-4044 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im81-1024x619.jpg\" alt=\"\" width=\"1485\" height=\"898\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im81-1024x619.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im81-300x181.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im81-768x464.jpg 768w\" data-sizes=\"(max-width: 1485px) 100vw, 1485px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1485px; --smush-placeholder-aspect-ratio: 1485\/898;\" \/> The Guardian&nbsp; &amp; Twitter API&#8217;s<\/h2>\n<p>I got API keys for both of these when I was testing out <a href=\"https:\/\/max-drake.cc\/2018\/06\/23\/orange-3-text-mining-basic-exploration\/\" target=\"_blank\" rel=\"noopener\">Orange Text Data&nbsp; Mining<\/a> . So I thought I would run them both.<\/p>\n<p>For the Guardian I did a search on &#8220;Brexit talks&#8221; and got a number of articles with URL&#8217;s to the articles. With the returned JSON this could be scripted like the Yahoo weather data above to display using JavaScript on a web page or it could be converted to a CSV file for use elsewhere.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4050 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im82-1024x880.jpg\" alt=\"\" width=\"1473\" height=\"1267\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im82-1024x880.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im82-300x258.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im82-768x660.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im82.jpg 1861w\" data-sizes=\"(max-width: 1473px) 100vw, 1473px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1473px; --smush-placeholder-aspect-ratio: 1473\/1267;\" \/><\/p>\n<p>The Twitter data I did a query on&#8221; Pakistan election: Imran Khan&#8221;. This I displayed as HTML data and Cut\/pasted it to Notepad++ where I saved it as a .html doc and then displayed the results to a Browser.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-4049 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im83-1024x783.jpg\" alt=\"\" width=\"1472\" height=\"1125\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im83-1024x783.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im83-300x230.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im83-768x588.jpg 768w\" data-sizes=\"(max-width: 1472px) 100vw, 1472px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1472px; --smush-placeholder-aspect-ratio: 1472\/1125;\" \/><\/p>\n<p><img decoding=\"async\" class=\"wp-image-4048 aligncenter lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im84-1024x651.jpg\" alt=\"\" width=\"1561\" height=\"992\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im84-1024x651.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im84-300x191.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im84-768x488.jpg 768w\" data-sizes=\"(max-width: 1561px) 100vw, 1561px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1561px; --smush-placeholder-aspect-ratio: 1561\/992;\" \/><\/p>\n<p>And in the browser it just looks like a Twitter page showing the tweets about the issue.<\/p>\n<h3><img decoding=\"async\" class=\"alignnone wp-image-4047 lazyload\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85-1024x1006.jpg\" alt=\"\" width=\"1520\" height=\"1493\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85-1024x1006.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85-300x295.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85-768x755.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85.jpg 1983w\" data-sizes=\"(max-width: 1520px) 100vw, 1520px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1520px; --smush-placeholder-aspect-ratio: 1520\/1493;\" \/><br \/>\nHere we can just embed the Twitter Get request into the web page.<\/h3>\n<p>Click on link:<br \/>\n<a href=\"http:\/\/twitter.com\/search?q=Pakistan election: Imran Khan&amp;Key=X0oNAoJQuYUe7ngd3MNQs5Ziv&amp;Secret=OD97arw24z5Dg303ghQemR8arPNeLg9oC0Qsi9y2O4Lon3ug4L\"><strong>Pakistan election: Imran Khan<\/strong><\/a><\/p>\n<h3>End comment<\/h3>\n<p>I noticed, while writing this post that the save\/view process was extremely slow. Since it is finding a GET request, heading off to get that data, then displaying it on the page, it takes time.<\/p>\n<p>So I think the moral to the story is to minimise what data you are calling from the API so that it downloads fast. Pulling redundant information through the API will slow the process, and it is unnecessary as you are not using it to display on the page. This is where the Postman App comes in useful as you can refine your Get request to be quite specific so that you minimise the data transfer to only the essential information that you require.<\/p>\n<p>I feel I am starting to get to grips with the API&#8217;s now. I can, with the help of the postman app play with the API data with more confidence. Still a way&#8217;s to go yet though.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The above image is for LinkedIn viewers as the API doesn&#8217;t seem to fire when viewed from linkedIn. Go here to see web page where the API displays the information. There is also an Extended page with weather &amp; forecast for Wellington, NZ, London, UK &amp; Boston, Ma, USA. Find it here. Output from API [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,3,29],"tags":[],"class_list":["post-4015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-data-extraction","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/07\/im85.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/4015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4015"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/4015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/4047"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}