{"id":4295,"date":"2018-08-07T14:53:26","date_gmt":"2018-08-07T14:53:26","guid":{"rendered":"https:\/\/max-drake.cc\/?p=4295"},"modified":"2018-08-07T17:08:35","modified_gmt":"2018-08-07T17:08:35","slug":"web-data3-part-2-google-sheets-api-to-web-page-automation","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=4295","title":{"rendered":"Web Data 3- Part 2. Google Sheets API to Web Page automation"},"content":{"rendered":"

I like it when I find some useful code and it works straight away. When it doesn’t I end up spending an awful lot of time trying to figure out what is happening. turning the programmers dark magic into something comprehensible.<\/p>\n

Continuing on from the previous post I started to look at the output and code a bit more closely. I think this process is quite useful, so I decided to write about the coding process so that if I revisit this later I wont spend so much time trying to re-figure it out. The main area of focus is on Anthony Brunson\u2019s tutorial number 2 of adding the extra coding to display results to a web page. The google API will just stay as Dark Magic!<\/p>\n

Here is link<\/a><\/strong> to file I am talking about. Right click on the page and choose “View Page Source” and cut\/paste into text editor to explore.<\/p>\n

Json output<\/h3>\n

\"\"<\/p>\n

Initially I thought, I have JSON output, great. But didn’t look at it too closely. In fact, because of the spreadsheet layout the information in json is in an array, or rather an array in an array.<\/p>\n

If you look at the console output at the top level, it is called object:<\/p>\n

\n
\n
Object<\/span><\/strong> { <\/span>range<\/span>: <\/span>“DisplayData!A1:Z1000”<\/span>, majorDimension<\/span>: <\/span>“ROWS”<\/span>, values<\/span>: <\/span>(162)<\/span> <\/span>[<\/span>\u2026<\/span>]<\/span><\/span> }<\/span><\/span><\/em><\/div>\n
<\/div>\n
Next level down there are 3 items =\u00a0 \u200b<\/span>majorDimension<\/span><\/em>, range, values.<\/em><\/div>\n
The majorDimension and range both have one attribute each. The values has many attributes.<\/div>\n<\/div>\n<\/div>\n
\n
\n

\u200b<\/span>majorDimension<\/span>: <\/span>“ROWS”<\/span><\/em><\/p>\n<\/div>\n

\n

\u200b<\/span>range<\/span>: <\/span>“DisplayData!A1:Z1000”<\/span><\/em><\/p>\n<\/div>\n

\n

\u200b<\/span>values<\/span>: <\/span>Array(162)<\/span><\/span>[ <\/span>(10)<\/span><\/span>[<\/span>\u2026<\/span>]<\/span>, (10)<\/span><\/span>[<\/span>\u2026<\/span>]<\/span>, (10)<\/span><\/span>[<\/span>\u2026<\/span>]<\/span>, \u2026<\/span>
\n<\/span><\/span><\/em><\/p>\n<\/div>\n<\/div>\n

The values have 162 attributes, and they are grouped into 2 sets as you look at the data in the console window in the browser from [0…99] and from [100…161]. This is an array of values from 0 to 161<\/div>\n
If we look at the [0…99] the first value 0: it too has an array 0<\/span>: <\/span>Array(10)<\/span> <\/span><\/span><\/em>, with 10 values, and so do all the rest of the first array, 1:,2:…..161:<\/div>\n
values<\/span>: <\/span>(162)<\/span> <\/span>[<\/span>\u2026<\/span>]<\/span><\/span><\/em><\/div>\n
\n
\n
[0\u202699]<\/span><\/em><\/div>\n<\/div>\n
\n
0<\/span>: <\/span>Array(10)<\/span> <\/span>[ <\/span>“Code”<\/span>, “Company”<\/span>, “Price”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n<\/div>\n
\n
1<\/span>: <\/span>Array(10)<\/span> <\/span>[ <\/span>“ASB”<\/span>, “ASB Capital Limited (NS)”<\/span>, “$0.907”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n<\/div>\n
\n
2<\/span>: <\/span>Array(10)<\/span> <\/span>[ <\/span>“MCK”<\/span>, “Millennium & Copthorne Hotels New Zealand Limited”<\/span>, “$3.360”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n<\/div>\n<\/div>\n

If we drill down further, looking at item 0: of the values: we see that it has values of 0: to 9:\u00a0 (so 10 values). At the end there is an item length:10 that tells you how many items there are in array values: 0:<\/p>\n

First. Values: 0: is the header column of the spreadsheet, so contains all the column headers (Row 1 in spreadsheet). Secondly, the following values: 1:, 2:, …..161\u00a0\u00a0 will all be the data rows.<\/p>\n

\n
values<\/span>: <\/span>(162)<\/span> <\/span>[<\/span>\u2026<\/span>]<\/span><\/span><\/em><\/div>\n<\/div>\n
\u200b<\/span>\u200b<\/span>[0\u202699]<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>0<\/span>: <\/span>(10)<\/span> <\/span>[<\/span>\u2026<\/span>]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>0<\/span>: <\/span>“Code”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>1<\/span>: <\/span>“Company”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>2<\/span>: <\/span>“Price”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>3<\/span>: <\/span>“Change”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>4<\/span>: <\/span>“Volume”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>5<\/span>: <\/span>“Value”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>6<\/span>: <\/span>“Capitalisation”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>7<\/span>: <\/span>“Percentage Change”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>8<\/span>: <\/span>“Type”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>9<\/span>: <\/span>“Green Bond”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>length<\/span>: <\/span>10<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span><prototype><\/span>: <\/span>Array <\/span>[<\/span>]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>1: <\/span>Array(10)<\/span> <\/span>[ <\/span>“ASB”<\/span>, “ASB Capital Limited (NS)”<\/span>, “$0.907”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>2<\/span>: <\/span>(10)<\/span> <\/span>[<\/span>\u2026<\/span>]<\/span><\/span><\/em><\/div>\n
<\/div>\n
So the Json file has 1. Top level object. 2nd level 3 items \u200b<\/span>majorDimension<\/span><\/em>, range, values. <\/em>And within the item:values there is an array of 162 items, and within that array for each item there is an array of 10 items .<\/div>\n
So rows are\u00a0 Object: values: [array 0 to 161]<\/div>\n
Columns are:<\/div>\n
Object: values: [array 0] [array 0 to 10]<\/div>\n
Object: values: [array 1] [array 0 to 10]<\/div>\n
Object: values: [array 2] [array 0 to 10] etc<\/div>\n
<\/div>\n
Now we know the json structure we can use javascript to go and grab the bits that we want. In the code that we are using there is a function:<\/div>\n
\n

function makeApiCall()<\/strong> {
\nvar params = {
\nspreadsheetId: ‘….’, \/\/ TODO: Update placeholder value.
\nrange: ‘…’, \/\/ TODO: Update placeholder value. };<\/p>\n

var request = gapi.client.sheets.spreadsheets.values.get(params);
\nrequest.then(function(response<\/strong>) {
\nconsole.log(response.result)<\/strong>;\u00a0 \/\/ TODO: Change code to process the `response` object:<\/p>\n

The above console.log call takes the response.result object and displays it in the console. This is the JSON file output.<\/p>\n

So in the Json output at the top of the page the Object = response.result<\/p>\n

In javaScript you can use the .length to find a length of an array,. so to find this in the json file we have and write it to the screen we can use:<\/p>\n

\u00a0document.write(response.result.values.length );\u00a0\u00a0<\/em>\u00a0 [Give me the length of the array of\u00a0 Object: values: ]. This will tell us the number of rows (including header) in the spreadsheet<\/p>\n

We can also use:<\/p>\n

document.write(response.result.values[0].length );\u00a0\u00a0<\/em>[Give me the length of the array of\u00a0 Object: values: 0: ]. This will tell us the number of columns in the spreadsheet.<\/p>\n

So if we wanted to grab the value of the 2nd item of the 4th array (remember arrays start at 0, not 1) in the json file:<\/p>\n

\u200b<\/span>values<\/span>: <\/span>(162)<\/span><\/span>[<\/span>\u2026<\/span>]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>[0\u202699]<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>0<\/span>: <\/span>Array(10)<\/span><\/span>[ <\/span>“Code”<\/span>, “Company”<\/span>, “Price”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>1<\/span>: <\/span>Array(10)<\/span><\/span>[ <\/span>“ASB”<\/span>, “ASB Capital Limited (NS)”<\/span>, “$0.907”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>2<\/span>: <\/span>Array(10)<\/span><\/span>[ <\/span>“MCK”<\/span>, “Millennium & Copthorne Hotels New Zealand Limited”<\/span>, “$3.360”<\/span>, \u2026<\/span> ]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>3<\/span>: <\/span>(10)<\/span><\/span>[<\/span>\u2026<\/span>]<\/span><\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>0<\/span>: <\/span>“ASB”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>1<\/span>: <\/span>“ASB Capital Limited (NS)”<\/span><\/strong><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>2<\/span>: <\/span>“$0.889”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>3<\/span>: <\/span>“-$0.004 \/ -0.45%”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>4<\/span>: <\/span>“120,000”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>5<\/span>: <\/span>“$106,680.00”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>6<\/span>: <\/span>“$311,150,000”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>7<\/span>: <\/span>“-0.4479283315”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>8<\/span>: <\/span>“HYBR”<\/span><\/em><\/div>\n
\u200b<\/span>\u200b<\/span>\u200b<\/span>\u200b<\/span>9<\/span>: <\/span>“FALSE”<\/span><\/em><\/div>\n

then in javascript we would write:<\/p>\n

\u00a0document.write(response.result.values[3][1])<\/em><\/p>\n

This would give us the 2nd value of the array within the 4th array\u00a0 of values. Which would be “ASB Capital Limited (NS)”<\/span><\/strong><\/em>.<\/p>\n

Looping<\/h3>\n

In the tutorial, instead of using console.log(response.result);\u00a0 a new function\u00a0\u00a0 populateSheet(response.result); is added. If we look at the function that is added:<\/p>\n

function populateSheet(result)<\/strong> {<\/em>
\nfor(var row=0; row<8; row++) {<\/em>
\nfor(var col=0; col<3; col++) {<\/em>
\ndocument.getElementById(row+”:”+col).value = result.values[row][col];}}}<\/em><\/p>\n

The code takes the result object and loops (iterates through, starting from 0 to 2 (col<3), so in english columns 1,2,3) through the columns (inner for loop- 3rd line of code) then rows (outer for loop-2nd line of code) and pushes these results out as a table.<\/p>\n

row 0: col 0, row 0: col1, row 0:col2<\/p>\n

row 1: col 0, row 1: col1, row 1:col2<\/p>\n

row 2: col 0, row 2: col1, row 2:col2 etc<\/p>\n<\/div>\n

which would give example results from a table with 3 columns and 3 rows :<\/p>\n\n\n\n\n<\/colgroup>\n\n\n\n\n
Id<\/td>\nName<\/td>\nWhere<\/td>\n<\/tr>\n
1<\/td>\nCat<\/td>\nWellington<\/td>\n<\/tr>\n
2<\/td>\nDog<\/td>\nAuckland<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

So the function gets given a json file and it loops through it.<\/p>\n

How big is the JSON file? If you tried using this code on the json output we have which has 10 columns and 162 rows it would get confused and break as it would read the first 3 columns\u00a0 from row 0 correctly and then\u00a0 would try and read the\u00a0 first column of row 1, but the next item in the json array would be column 3 row 0, so it would stop and break.<\/p>\n

So we need a way of making sure we have the correct length of the arrays (cols and rows) to feed into the loops of the function, then it won’t break, whatever shape json file array we give it, so we change the code in the function to this:<\/p>\n

\n

function populateSheet(result) {<\/em>
\nfor(var row=0; row<result.values.length<\/strong>; row++) {<\/em>
\nfor(var col=0; col<result.values[0].length;<\/strong> col++) {<\/em>
\ndocument.getElementById(row+”:”+col).value = result.values[row][col];}}}<\/em><\/p>\n

PHP Grid code<\/h3>\n

The other additional code in the tutorial has some PHP code:<\/p>\n

<div style=”margin-left:auto; margin-right:auto; width:1960px;”><\/em>
\n<?php<\/em>
\nfor($row = 0; $row < 8;<\/strong> $row++) {<\/em>
\necho “<div style=’clear:both’>”;<\/em>
\nfor($col = 0; $col < 3<\/strong>; $col++) {<\/em>
\necho “<input type=’text’ style=’float:left;’ name = ‘$row:$col’ id=’$row:$col’>”;}<\/em>
\necho “<\/div>”;} ?><\/em><\/p>\n<\/div>\n

This bit of code creates the table grid on the web page which is subsequently populated by the javascript. If you copy\/paste this code to the original code without adding\u00a0 any of the function populateSheet(result)<\/em> code you’ll find the grids drawn on the screen with blank cells.<\/div>\n
I don’t quite understand how this part of the code works (I cannot see anything in the html code about border (drawing border around the cells).<\/div>\n
Anyway, again it has fixed numbers for rows and columns to iterate through $row<8, $col<3.<\/div>\n
Initially I thought, how do I take the javascript code to find lengt5hs of rows and columns of the json array and pass it to the PHP code and then started to look at the relation of php and javascript.<\/div>\n
PHP is activated on the server side, so happens first. Then the javascript is called on the client side ( on your computer) so happens afterwards. So if you want to use the javascript to pass something to the PHP you have to go : PHP then Javascript, pass to PHP then do PHP again, then I think javascript ( may be able to do Ajax at some point instead of PHP), but it all sounded complicated.<\/div>\n
Then I thought, wait a minute, we know the size of the spreadsheet that we are calling from Sheets, so we can just put the fixed length in.<\/div>\n
So no need to find length of array, that is known. We can count on the spreadsheet column\u00a0 numbers and row numbers. We just need to put these numbers in to the code when we are putting in the spreadsheetId and range etc when we are setting up the code.<\/div>\n

Results<\/h3>\n

If you look on this page : GoogleSheets data from Web Table displayed in Web Page with Table automatic update<\/a> you will see table frame.<\/p>\n

I am having a few issues with the data being displayed. Its the sign in issue.<\/p>\n

So I am still having issues with accessing the data from the spreadsheet even though I have made the spreadsheet public and accessible to the web. I still have to work through those issues. I have found this site about Auth2 Google playground<\/strong><\/a> that I will explore to see if it can help me.<\/p>\n

\"\"<\/p>\n

I put the buttons (Sign In\/Sign Out) back in and tried to test from my mobile phone but the buttons aren’t working on that. All a bit of a challenge.<\/p>\n

From the last post\u00a0 Web Data3- Part 1. Google Sheets API to Web Page<\/a> I wanted to do 3 things, I have got the code working,\u00a0 but I still have an issue of login.<\/p>\n

I will stop here at this point, still having the login issue.\u00a0 I want to go on and look at updating Google Sheets from the web.<\/p>\n

PHP code in WordPress on post\/page<\/h4>\n

I wanted to make a page to demonstrate the process (see image and link above that is partially working).<\/p>\n

WordPress does not seem to allow you to put raw php code on a post or page.\u00a0 Another challenge to the process.<\/p>\n

I did find an article How to run PHP code directly from WordPress posts and pages<\/strong><\/a> on this. The actual plugin they suggested I couldn’t find but I used PHP code snippets (Insert PHP)<\/strong> where you add a shortcode to your page and that works fine.<\/p>\n

End Comment<\/h3>\n

Yes, data is displayed on the web page from Google Sheets. Unfortunately with this tutorial it is static, and has a fixed order. There is no highlighting of Column headers nor is there any formatting.<\/p>\n

The share market data that I\u00a0 am displaying needs to be sorted to be able to be explored.<\/p>\n

The solution is to look at JQuery dataTables which will allow for some formatting and sorting. That is another exercise. The failure issues I highlighted in Part 1 of this process showed dataTables displaying information from Google Sheets, so it is possible. I hope to show on the page where I am displaying current output GoogleSheets data from Web Table displayed in Web Page with Table automatic update the two types of outputs, but that is for another day.\u00a0 DataTable example here<\/strong><\/a>.<\/p>\n

I have been talking to a friend about doing 360 panorama images with hotspots and publishing them. I have done this using Python, see\u00a0\u00a0Panorama file Hotspot setup using FREE Photo Sphere Viewer, plan link & tabs<\/strong><\/a>\u00a0 and Python 6. How to automate the creation of HTML pages for 360 Panorama\u2019s\u00a0<\/a><\/strong>.<\/p>\n

We have been discussing if there was a simple process to get users to be able to put these into the photos themselves. The friend suggested a web page solution, I proposed a Spreadsheet solution:<\/p>\n

The outline of the process would look like:<\/em><\/p>\n

Excel Macro templates (similar to my 3DPDF to tables Macro). As most people will be comfortable with Excel. <\/em><\/p>\n

    \n
  1. \u00a0Will need a setup directory for the photos and a sub-directory with all the panorama viewer code. <\/em><\/li>\n
  2. Will need to have a CSV\/Excel file with names\/directory\u00a0 of photos. (Note, these most probably\u00a0 need to be renamed- this can be done with Excel & windows CMD ( a process can be done: https:\/\/benholland.me\/tutorials\/2011\/11\/11\/rename-multiple-files-using-excel-in-windows.html<\/a>)<\/em><\/li>\n
  3. Will have to load the file to view of the image that they want to put the link into ( eg view in Paint to get\u00a0 x\/y coordinates of where the hotspot to go) <\/em><\/li>\n
  4. Then the Target\u00a0 location & the Hyperlink (to the proposed photo- I think realistically, it has to be part of the set in the specific directory) will needed to be added ( Can have columns for this in Excel Macro)<\/em><\/li>\n
  5. There may be multiple links from one photo (eg A hall to lots of units), so have to make provision for multiple links)<\/em><\/li>\n
  6. Then automate process of creating HTML file for the photo’s. ( Can be done in Excel – http:\/\/www.meadinkent.co.uk\/xladvhtml.htm<\/a>)<\/em><\/li>\n
  7. These need to be processed so that they all end up in the same directory so you can Zip them up and share the whole package.<\/em><\/li>\n<\/ol>\n

    Maybe the Google Sheets to Web, if bi-directional, can be a web & spreadsheet solution. So I want to explore the updating Google Sheets from the web as per Anthony Brunson\u2019s tutorial\u00a0<\/a>number 3. This is the next exercise I want to stuff up.<\/p>\n

    So what is still outstanding is Login Issues for accessing Data on the web, even with public sheets & setting up JQuery dataTables.<\/p>\n","protected":false},"excerpt":{"rendered":"

    I like it when I find some useful code and it works straight away. When it doesn’t I end up spending an awful lot of time trying to figure out what is happening. turning the programmers dark magic into something comprehensible. Continuing on from the previous post I started to look at the output and […]<\/p>\n","protected":false},"author":1,"featured_media":4297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,3,32,29],"tags":[],"class_list":["post-4295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-data-extraction","category-power-bi","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im15.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2018\/08\/im15.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\/4295","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=4295"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/4295\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/4297"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}