Google Sheets as JSON data for Web Pages JavaScript Fetch

Create a URL generator Website from scratch HTML CSS and JavaScript make custom queries to return Google Sheets Data

4.80 (49 reviews)
Udemy
platform
English
language
Web Development
category
instructor
4,952
students
1.5 hours
content
Nov 2022
last update
FREE
regular price

What you will learn

How to setup your Google Sheet to output data as a web endpoint

Connect to a Google Sheet from JavaScript frontend code using Fetch

Get Sheet data as JSON format it in a useable format for JavaScript

Output Sheet data into your webpages

Description

Do you want to connect your Google Sheets data to your website, this course will provide the steps to create the connections. Explore how to setup a connection to your sheet data with JavaScript return your data and use it on your web page and within you web applications

Development of a website that generates links for Google Sheets.

Combination of Google Sheets send your data and using the data from your sheet in real time on your website.

Requests and query the data for results, return it on your website.

Using JavaScript Fetch to connect to the sheet Data

Create an index.html page and link to a JavaScript file. Suggested editor is Visual Studio Code and using Live Server to output the page as HTTP page in the Browser

Get Sheet data as JSON with Headings from sheets

First row of data automatically becomes headings if they contain string values. You can now loop through the first row cols and get the heading values for each one of the rows. Get your Content in CSV format and specify the format using the tax out value. csv or json

Using Query Language Select Custom Sheet Data as JSON

With Google Sheets you can make custom query requests to the Spreadsheet to return specific results. MakeSQL like queries to your spreadsheet data. Google Sheets can select the sheet and the response format like JSON or CSV. Perfect to use Google Sheets data directly on your Website.

Create a Dynamic Web Application to dynamically connect to different sheets

Exercise to make connections to your Google Spreadsheet with Dynamic value from an input field. Set the Spreadsheet ID from the input field, select the sheet you want to return data from and add a query value that gets encoded. Return the results from the interactive web input fields that are specific to that request. Make more request build your endpoint URL.

Source code and resource included



Content

Introduction Get Google Sheet data as JSON data for web applications

Introduction Google Sheets Data as JSON Website Data Query Sheets
Using JavaScript Fetch to connect to the sheet Data
Source Code add Sheet data to your website
Get Sheet data as JSON with Headings from sheets
Source Code JSON Google Sheet Data with Headings Example
Using Query Language Select Custom Sheet Data as JSON
Source Code Sheets Data Custom Queries for Data return to Webpage output
Create a Dynamic Web Application to dynamically connect to different sheets
Source Code Query to Sheet get JSON

Screenshots

Google Sheets as JSON data for Web Pages JavaScript Fetch - Screenshot_01Google Sheets as JSON data for Web Pages JavaScript Fetch - Screenshot_02Google Sheets as JSON data for Web Pages JavaScript Fetch - Screenshot_03Google Sheets as JSON data for Web Pages JavaScript Fetch - Screenshot_04

Reviews

Michael
May 12, 2023
Never seen this explained so simply! Impressive walk through. Very excited to follow along through this.
Юрий
January 31, 2022
спасибо большое за курс то что надо , то что искал, как данные с таблицы перевести на сайт и обратно))))

Charts

Price

Google Sheets as JSON data for Web Pages JavaScript Fetch - Price chart

Rating

Google Sheets as JSON data for Web Pages JavaScript Fetch - Ratings chart

Enrollment distribution

Google Sheets as JSON data for Web Pages JavaScript Fetch - Distribution chart
4254312
udemy ID
8/20/2021
course created date
8/22/2021
course indexed date
Bot
course submited by