my pal JSON should be your Friend too

Just another boring article about JSON? Not really. First off, ur homework is to google JSON to see what it stands for then I’ll tell u the rest below. I am deliberately skipping all the definitional jargon because I think this jargon is what makes the topic seem boring.

Hmmm.. how can i make a boring topic sound palatable and appetizing? JSON, the defacto data format for HTML, end of story. Not exactly folks. I can find 3 real exciting talking points for JSON. Fun for everyone.

First, everyone wants a bargain. We actually save money by storing our data as a JSON file.

Next, Serverless? Hell yeah! JSON in the AWS cloud, with only a few easy steps in plain JS (no node necessary).

Finally, faster data with noSQL. Who would say no to faster. Caveat, some limitations do apply to this format. Read this important piece on whether to sql or to noSQL at https://dev.to/rickdelpo1/to-sql-or-to-nosql-with-a-simple-nosql-example-2ime

So how can u beat these 3 reasons to appreciate JSON. Have I convinced u yet?

Now lets elaborate on these 3 features. Oh, and don't miss out on part 2 of this piece, storing JSON in an AWS s3 bucket.

1. money saving - I'm only paying 5 cents per month to AWS now after paying $10+ per month hosting servers on EC2 for the past 2 years. This is badass! Could of done it sooner but I had to work for a living. Now that time is on my side I am able to delve into the world of serverless computing. People should have my problems.

2. thats it ! Serverless, yay! Getting rid of all my server overhead results in dollars saved. I achieved serverless by making an AWS lambda do my CRUD operations on the data uploaded to S3. Previously Oracle, MySql and Postgres were my world for 20 years but now I ditched all that. Also, I pay 25 cents per month to outsource my Apache httpd server to host my html. Yes u can use Mongodb or Cockroach or even hybrid Postgres for noSQL but all these apps require a server. So the raw JSON option I write about here is entirely serverless but does require some extra work. Afterall we are programmers aren't we?

3. we get to do data without the sql server and its query engine. So let's do data! We do it all. We store, apply logic, fetch and render. First off, JSON is a prerequisite to noSQL. It is the key-pair text format that is needed for noSQL. Keys and pairs together resemble a row of data in sql. Secondly, this format is structured as an array and is iterable by default. Through this iteration triggered by a JS Fetch we form what resembles a table in sql, more commonly known as a collection of data. We display the data by passing our table object into the appendChild method of the javascript table model. All of the above is done without node or any libraries, just plain javascript. Click on my above referenced link where I provide some example code.

While rendering we will want some sense of order for our data. There are a small number of javascript array methods that can be invoked for this purpose. We can sort or group our data this way. By using array methods we query the data and bypass the traditional query engine which resides on a server. Basic queries are referred to as CRUD operations where we create, read, update and delete or data.

4.So what about the Logic Layer. Because we do not utilize a query engine here we need to simulate one. I construct a simple AWS Lambda function for this. In short we insert data into our array and we update the data when certain events occur. You can find some example code here at https://dev.to/rickdelpo1/removing-google-analytics-and-replacing-it-with-a-cookie-free-javascript-geo-tracking-app-2dko

Part 2 - Creating an S3 Bucket

The simplest way to store a JSON file 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 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. Our one flat file JSON 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. Go to S3 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 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)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:AWS:s3:::your bucket name/*"
        }
    ]
}

4.Then, still in permissions tab go to cross origin (cors), edit and replace with below and save

                 [
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
] 

5.Go back to the objects tab and press Upload, then go to where u saved ur newly created JSON file and complete this operation.

6.Once the JSON file is uploaded successfully it will appear in the objects section of ur s3 bucket. Double click the JSON file and u will be in the properties tab where u see Object overview. Click on the object url provided and raw JSON data will appear. Save this link somewhere because u will need it to fetch data from Javascript.

Here is a useful link that shows screenshots of the above steps, but it forgets to do the CORS part in my step 4
https://www.simplified.guide/AWS/s3/create-public-bucket

Note that the above instructions only get u started with JSON in S3. If u want to manipulate the data u need an AWS Lambda Function, an API gateway and IAM permissions. This will be covered in a separate piece which is a bit more advanced.

Thanks for reading Folks !!

For more about the author, Rick Delpo, go to https://javasqlweb.org or https://howtolearnjava.com

PS: I forgot to mention above, after editing permissions, go to the properties tab and enable static web hosting.

Here is a cool link that uses JSON as a Data Source in a Stacked Bar Chart
https://dev.to/rickdelpo1/how-to-populate-a-stacked-bar-chart-in-plain-javascript-12p9

Comments

[Reincoder]

Incredible article, Rick. The power of JSON can not be underestimated.

For my weekend data projects I do lots of hacky stuff with JSON. I have a VPS hooked up to a db however after processing the data I push JSON files to a firestore db. So, rather than querying a database through a backend, the JSON files contain everything I need and there is no processing involved!