Here we will learn Plain Vanilla JS without using NodeJS or external libraries. We will start right out of the box with a use case by converting some Google sheet data into JSON and storing it in an AWS S3 bucket, then fetching it using plain js. Most lessons start with a hello world program and not much else but here we actually have something to program right away so we can practice our arrays and loops which are key pillars in any programming language. Plus you can have a foray into the world of Data Science here and perhaps make a career out of it like I did.

When we first study data we think of SQL but there are many apps where SQL is overkill and not needed. In a dashboard with a few metrics we can get away with a simple JSON flat file as our data source with no relationships to other data. Dashboards can use this NoSQL format and are a popular choice for a Marketing groups reporting needs.

In order to set up our environment we only really need Google Chrome and the json chrome extension for converting spreadsheet data to json. Then we need free AWS and an S3 bucket as our generic website. For an IDE we will use just a windows notepad. We will also need a local network to fetch our data because fetching data from the C drive will not work as the javascript fetch api uses http protocol so a web server is needed for this. Before going public on free AWS we will set up a local web server first to test our data. We will use simple Python for this.

set up the environment
steps to set up a local Python server and index file

Before creating an AWS remote server we need to first set up a local web server using Python..here is how to do this

First find out if Python is installed... open a command prompt which will default to your home folder c:\Users\yourname and type in python. If version info shows then it is installed and u can go to step 6 below (but be sure that an index file is saved in your home folder first)
if you dont have python installed follow these instructions

Python Server in windows
1 go to search area and type cmd then hit command prompt, a black screen will open with path to your home folder (usually C:\Users\yourName)
2 type in python, if installed it will show a version number
3 if not installed then the get button shows up, press this and download will install over a few minutes (or just download python from chrome)
4 once fully installed reopen cmd prompt and type in python again
5 version info will show....here is where we start if python is already installed
6 type in python -m http.server and this starts server (keep this cmd window open)
7 be sure you saved an index file in home folder (in file explorer click c: then Users then yourName to open home folder)
7a keep cmd open while u go to localhost in step 8...closing cmd requires having to reopen and start over
8 go to chrome and type in localhost:8000 and your default index page will appear....see below for creating an index file

Python server on a Mac
on a mac open a terminal and start with step 2 above ....except might need to try 3 different options above depending on version of python that is pre installed. Our home folder should be the folder Python is installed in and the same as the terminal folder where we start server.

try this first

1. type in python -m http.server or
2. type python3 -m http.server if above does not work Hit return and Python 3 will instantly start a simple HTTP server from the directory in which the command was executed..this dir should also have an index file or option 3 if others dont work
3. type in python -m SimpleHTTPServer 8000 for older versions

How to create an index (home) file in our Python path..save it to same folder where the web server resides. Copy this code and save as index.html

     

 hi there, this is our first html page 

prepare some data

1 copy this data and paste it into a blank google sheet
this is our fictitious company with an orders database

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

VERY IMPORTANT - after pasting data and while it is still highlighted, in google sheets, press data then split text to columns

2 get the json chrome extension
enable chrome to save as json before creating the sheet.
I found this easy shortcut that adds a JSON icon to the google sheet toolbar...this is a chrome extension
first go to this link https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
then press add to chrome, over to the far right of page
then open a blank google sheet and u will see the JSON icon as the last item in the toolbar near top of page

3 transform your data into json
paste above data into the sheet, then text to columns, then press the json icon and go to downloads to get ur json file

4 save this json file in the same folder where python and your index file reside...I saved it as orders.json

execute our program

5 fetch data from your index file...testing our server and files config

change your index.html file to contain the following code which is different from the code we will use below to access the data from a public server