extracting data from google spreadsheet into a html table - javascript

I have a google spreadsheet that stores data at my work and is constantly being updated via google drive so it is always online editing, what I want to do is to be able to extract the values in those cells and have them show up in a HTML5 table on my website, what would be the best solution for this?
I did try one way which was to just embed the spreadsheet in a iFrame and have that refresh every 5 minutes, but the refresh loading is too slow and it causes issues with trying to get the spreadsheet to fit perfectly in the iframe everytime I refresh. these websites will be on display on TV screens so I dont want to be adjusting them regularly, they will auto refresh and be idle.

Your Google Sheet's rows/columns can be exported as a pretty minimal HTML table. You can grab that HTML and manipulate it however you like. Here's how to get it:
Open the Sheet and find your file_id in the URL, and the gid for the specific tab you wish to export (you may have several spreadsheets within a single Google Sheet).
Use this URL string, replacing <FILE_ID> and <TAB_GID> with your own:
https://docs.google.com/spreadsheets/d/<FILE_ID>/gviz/tq?tqx=out:html&tq&gid=<TAB_GID>
You can set the refresh/recalculation rate under File > Spreadsheet settings to be every minute, if necessary.
Example:
Here is a Google Sheet with some data. To export this as an HTML table, we take:
the file_id: 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms and
the tab_gid: 0
from the URL and substitute those into the URL string (above), yielding:
https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/gviz/tq?tqx=out:html&tq&gid=0
Hope that helps. 🍻

Related

Getting a DIV element from an external webpage using JavaScript only

I'm having a slight problem. I'm trying to make a script for Google Sheets (JavaScript), where I need to import a number from an external webpage. This number is an exchange rate between coins and represents the cost of the "foreign" coin, displayed in my local currency.
This number I'm trying to import is held in a DIV, not a table, that's my problem.
What I have is:
"Unique URL". The exact URL to the page where the exchange rate is located (no login is required, the data is publicly available).
"Unique class name". The div does not have an ID, but it does have a unique class name.
Does anyone know how to extract this DIV (and it's content) and load it into my Google Sheet? Once I have the .innerHTML, I can format the content into a number and load it into my Sheet.
I have a feeling that it's fairly straight forward, if I only knew...

I'm currently trying to create a chrome extension (ContextMenu with right click search)

I was trying to include an option which will redirect the user to the google sheets page and select a particular cell as per the selection text in the UI. I already created the contextmenu extension and also associated the google sheets URL in the JavaScript code and it's redirecting as intended.
All that I would like to know is, how can we let the system know that once it reaches the required document, what is the procedure to find a cell in the sheet using URL itself?
Like is there any command we can use after #gid=0, because #fragments would generally mean the end of the parameters and will ignore anything coinciding with it.
I've tried using '/search?q=query' after the doc URL, but no luck
let url = 'https://docs.google.com/spreadsheets/d/fileID/edit#gid=0'

How to embed excel sheet to web page for editing and uploading it into database

--> I'm getting iframe code to embed in microsoft excel. But I can see the sheet only in the web page.
--> I want to edit the embedded sheet and I want to add a button to upload that embedded sheet into test link database.
Can anyone please help me? Is there any plugin to do it?
Method 1. You can create a google spreadsheet and there is an option to publish it to web and get the embed code for iframe. The iframe code can now be used in any webpage. The sheet will get displayed in the webpage but you wont be able to edit the cells.
Method 2. You can create a google spreadsheet. You can directly use the spreadsheet url (eg: https://docs.google.com/spreadsheets/d/1jTvLJsqOVOnmCrNCCqoUs9vRJkYrD_kJRLyY/edit#gid=0) which you see in your browser's address bar and use it as the src to iframe in your webpage. The spreadsheet will get displayed in your webpage and you can also edit the cells in it. Thanks to the x-frame-options header which google has not applied/checked.
Sync Data between Sheet and DB:
You can write a macro code/ Google Script function which will get triggered/ executed on various events such as sheet open, row edited, button clicked etc. In the code you can create a JDBC connection to your database such as MYSQL, MSSQL, Mongo etc and sync the rows as per your logic. https://developers.google.com/apps-script/
You can also use plugins such as Zapier, Kloud.io etc to sync the data (Bidirectional) between the sheet and your preferred DB.

Is there a way that I can autopopulate my webpage with pictures from another website?

I'm making a simple website (think of it as wikipedia without the text), where the users click links to people's names and then go to that person's personal page. I would like to be able to have an image of the person also show up on the personal page, but I don't want to hard code the links to the images or save them on my computer.
Is there a way that I can get the top search result from Google images and then copy that link to put into each page dynamically?
I would suggest using the google api (Google image search api ), pull a search on page load for the user, parse the json for the "unescapedUrl" and use that as your img src attribute.

What is the best approach for storing YouTube content appended to user contributed content?

So I'm trying to implement similar functionality to Facebook where I am including information from YouTube should a users post contain a link, and when clicked it embeds the video.
I've accomplished it thus far, I'm just wondering how Facebook stores this information.
To me there are two options:
1) Have the post saved as normal (it is just plain text), and if the post contains a youtube link, append it on the fly in JavaScript whenever that content is viewed. However I know that when you post a link, Facebook gives you the option to change the title, description etc. Which leads me to..
2) Generate the HTML that would be otherwise appended when viewed and store it alongside the post at the database-insert level.
If so, doesnt that add a significant amount of information per post? What happens if you want to change the formatting of all youtube content within posts on your site later on? Each will be stored individually and seems like it would be a pain.
What is the best way to manage & engineer this sort of functionality?
Cheers,
I'd store the information itself in the database, but not as HTML. Generate the HTML on the fly but store the data in a separate place. If you don't want to add too many extra database fields consider storing the information in some serialized form (like serialize() in PHP).
Anyway I would always keep information separated and never store auto-generated HTML unless it's some sort of cache that can be re-generated.
If you want the user to include his video within his text, store the link in HTML within that user's intervention, and output it as is from the database on the page. Then your users can edit their posts to decide whether to place the video before, after, in the middle or not at all, and can change the details in HTML.
If you are showing the video in some standard way, then store the video link along with the post in a separate database column, and generate the HTML on the fly. You can have data in columns for size, colour etc..., but the flexibility will always be limited to what you decide to store: if there is a database coloumn for colour then you are letting the user choose the colour, otherwise... not.
So, the most flexible is to let your users type HTML. If you think they aren't up to it, or you want to limit their choices of what they can format, you could use a java(script) rich text editor of the type that you have in stackoverflow, wikipedia etc., with possibilities to edit text in certain chosen ways via buttons. You could also store the post in XML, say in a chosen subset of HTML5 (anything that is valid in a certain container...), and transform it at presentation time.
to me this sounds like a problem that was taken too far.
if you implement ckeditor in your post form,
it should resolve the problem ( if i understood it right ),
since in ckeditor you can embed an swf/flv,
and the output will be html.
that gives the editor the power to decide exactly where he want the video ( since he can add the link wherever he wants in the form ).
since the flv/swf come with its meta data from youtube, you dont need to save that data,
just the link to the video.

Categories

Resources