Plain Javascript Refresher for those feeling left behind or not knowing where to start w/ Functions, Arrays, Loops, JSON & NoSQL

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:Usersyourname 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:UsersyourName)
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

     

<header>
</header>

   <p> hi there, this is our first html page </p>

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

     

<header>
</header>

   <p> hi there, this is our first html page </p>

6 call up localhost:8000 and view the data
7 after playing around with json on a local server we can then create a public S3 bucket in AWS

Configuring an AWS S3 Bucket as our Public Server

The simplest way to store a JSON file remotely is in AWS S3. By not creating a schema in a traditional data server we become serverless. We are out in the AWS cloud with S3 where we can connect to our bucket link from anywhere. As said previously the noSQL S3 approach has some limitations. But it also has big benefits. When working with data, human nature tends to want to only use one table similar to the ole days where we relied heavily on one excel table. This one flat file format can handle a few metrics so we don’t bombard our audience with complexity. An ideal use case for a flat file is a simple dashboard.

First we create an AWS s3 bucket then we upload the JSON file. Here is how we do it:

1 Sign up for free tier AWS, go to S3 from the AWS console and create a unique bucket name

2 make it public, by going to bucket permissions tab to turn off block public access - go to block public access section, edit, uncheck and save

3 stay in the permissions tab then edit bucket policy, erase what is there and replace with following, then save changes (remember to replace your bucket name below with the actual name)

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

4 then, while still in the permissions tab go to cross origin (cors), edit and replace with below and save

    <div id="myData"></div> <!--data result displays in this html div-->

    <script type="text/javascript">
convert();  //run the convert function..this converts json to html and displays to the front end in the myData div
                 // async is needed to run await which is the newest way to return a promise..await must be used inside a function
    //When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
                //let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
                      //replace rickd with your bucket name
   let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
                let data = await response.json(); //getting data array in json format...waiting for all the data to come in

                    //then iterate over javascript array for as many times as there are js objects inside the array
            for (var i = 0; i < data.length; i++) {
                data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
              } //end for loop
         //we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
  //console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format

} //end function
    </script>


<!-- next up..we need to return this data in table format-->

The above is the detailed content of Plain Javascript Refresher for those feeling left behind or not knowing where to start w/ Functions, Arrays, Loops, JSON & NoSQL. For more information, please follow other related articles on the PHP Chinese website!