Catch Us Old School


  • Edgeworks Creative
  • 46 South Main Street Suite 3
  • Waterbury, Vermont 05676
  • 802.767.9100

Contact Us New School


Send us a message using any of the methods below:

Edgeworks Creative Logo

We code so you don't have to

Alphabet Soup: JSON

Posted By Ed Rooney Ed Rooney Posted On May 29 2019 at 12:05 PM May 29 2019 at 12:05 PM

Categories:

Tags:

What is JSON?

JSON is an acronym for JavaScript Object Notation and it has fast become the defacto format for sending data back and forth between a server and a browser as well as APIs and the applications that call them.

Back in the early days of the internet when you pulled up a web page it delivered everything you see on your screen in one big responise. Over time it became possible to break that up into multiple calls and responses. We think of that shift as Web 2.0 and it ushered in the modern internet where aspects of a given page are changing without having to load an entriely new copy of the page. A clear example of this would be when you're perusing your favorite social network and you receive a notification. Suddenly a little red dot appears indicating you have a friend request or new images appear as you scroll down a page. This is possible becuase of JavaScript and it is made simple for developers because of JSON.

JSON is a format for describing things and is both human-readable and self-describing. What do we mean by that? Let's look at an example. Suppose we were looking at a webpage that was showing us a list of baseball hall-of-famers and the teams they played for. Maybe that page listed five to start and as we scrolled down the screen it fetched three more. When the web page said to the server "hey - give me five more" the server might respond with a JSON that looks something like this:

 

{
     "players":[
         {"firstName":"Hank", "lastName":"Aaron","team":"Milwaukee Braves"}, 
         {"firstName":"Sparky", "lastName":"Anderson","team":"Detroit Tigers"},
         {"firstName":"Roy", "lastName":"Campanella","team":"Brooklyn Dodgers"}
     ]
}

 

What we can see right away is that we can read this ourselves and understand this is a list of players with their names and what team they played for. In a real-world scenario we would most likely include a lot more information, but it gets the point across.

Looking a bit deeper at the structure of the JSON response we see some very basic rules that define how a JSON statement is structured. These rules include:

  1. Data is delivered in name/value pairs sepearted by a colon and enclosed in quotes
  2. Each specific data item is seperated by a comma
  3. Curly braces hold objects
  4. Arrays are held in brackets

In our example the server is sending us an array of objects. The array is "players" and each player is an object. 

The bit about objects and arrays might be confusing, but it's where the magic really happens for developers. Because JSON uses this format it's very simple to convert a JSON into arrays or objects used by programming languages. Indeed, JavaScript has built-in native support for JSON allowing a server to send back JSON as a string of text and then your borwser uses JavaScript to parse that text and further manipulate or display it.

For more information on JSON check out the following:

https://www.w3schools.com/whatis/whatis_json.asp

https://www.json.org/