Shane White

JSON for Absolute Beginners

Today I'm going to be blogging about JSON, and no, I’m not talking about that one Matt Damon movie. We will be learning about Javascript Object Notation. That’s just a "fancy way" of describing a common way to store javascript objects.

What is JSON?

JSON is an easy-to-read format of storing a wide variety of javascript variables. JSON has became very popular in web programming because it allows developers to transfer data between many different sources. Transferring data is the most powerful asset in computer programming. Can you imagine the internet if you weren’t able to easily transfer data back and forth? Facebook would be pretty boring if you could only look at your own profile.

Screen shot of having no friends

Json Syntax

Every json object begins and ends with a curly brace. Inside the curly braces are simple key, value lookups. A key is a unique identifier of some data item, and the value is the actual data. To separate the key and the value we use a colon.

Jason wrapped in JSON

Example

My name is Shane. In the previous statement the key would be “name” and the value would be “Shane”.

{key, value}

*Because my name is a string, we surround the text with quotes. Just like declaring a string in Javascript. If the value was an integer type we would not use quotes.

{Name, "Shane"}



Let’s Make An Object

You should already be familiar with the concept of objects, but here is a quick refresher. An object is a collection of variables that is grouped into one single variable. An object can contain numbers, letters, variables, functions, and even other objects.

Let’s make an object that represents a football team, the Philadelphia Eagles. Follow along by creating your own JSON object using the players from your favorite team.

var footballTeam = {
WideReceiver1: "Nelson Agholor"
WideReceiver2: "Jordan Matthews"
WideReceiver3: "Dorial Green-Beckham",
LeftTackle: "Jason Peters",
LeftGuard: "Allen Barbre"
Center: "Jason Kelce",
RightGuard: "Brandoon Brooks",
RightTackle: "Lane Johnson",
TightEnd: "Zach Ertz",
RunningBack: "Ran Mathews",
QuarterBack: "Carson Wentz",
DefensiveEnd: "Brandon Graham",
DefensiveTackle1: "Fletcher Cox",
DefensiveTackle2: "Bennie Logan",
DefenisveEnd: "Connor Barwin",
OutsideLinebacker: "Nigel Bradham",
MiddleLinebacker: "Jordan Hicks",
OutsideLinebacker: "Mychal Kendricks",
Cornerback1:"Leodis McKelvin",
Cornerback2: "Nolan Carroll",
Safety1: "Rodney McLeod",
Safety2: "Malcom Jenkins"
}



Congratulations you have just made your first JSON object! This JSON object is stored as a javascript variable called footballTeam.

The above JSON object is valid. However the power of JSON comes from being able to store large amounts of data in an organized manner. We can organize objects similar to how a department store designs their store layout. Let’s say we walk into a store needing to buy a shovel for our garden. The store has 1000s of items for sale, and it would take forever to look through every item to find the shovel. Luckily the store has a system that will make finding the shovel pretty easy.

  1. First we are going to locate which department the shovel is in. So we walk to the “Home and Garden” department.
  2. Inside the Home and Garden department, there are a few different “sub-departments”
    1. Plants
    2. Outdoor Furniture
    3. Tools
  3. Being that a shovel is a tool, we walk over to the tool sub-department. Located in the tool department there are two aisles:
    1. Power tools
    2. Hand tools.
  4. We walk to the hand tool aisle and locate the shovel.

Using this method of locating a shovel, we narrowed down having to sort through 1000s of items to just having to sort through 4 different departments. Let’s take a look at the above example in JSON.

{
  Department: 
  {
    Grocery: {...},
    Automotive: {...},
    Electronics: {...},
    Appliances: {...},
    HomeAndGarden:
     {
       Plants:{...},
       OutdoorFurniture:{...},
       Tools:
         {
            PowerTools: {...},
            HandTools: {["Rake", "Shovel", "Spade"]},
          }
       }
    }
}

Organizing the football team

Let’s go back to the football team object we created. How can we better organize the team? Well, the most obvious thing we can do is separate the offense and defense positions. First try it yourself, then compare your answer to the this one here(image below).

var footballTeam = {
  Offense:
   {
     WideReceiver1: "Nelson Agholor"
     WideReceiver2: "Jordan Matthews"
     WideReceiver3: "Dorial Green-Beckham",
     LeftTackle: "Jason Peters",
     LeftGuard: "Allen Barbre"
     Center: "Jason Kelce",
     RightGuard: "Brandoon Brooks",
     RightTackle: "Lane Johnson",
     TightEnd: "Zach Ertz",
     RunningBack: "Ran Mathews",
     QuarterBack: "Carson Wentz"
   },
  Defense
   {
     DefensiveEnd: "Brandon Graham",
     DefensiveTackle1: "Fletcher Cox",
     DefensiveTackle2: "Bennie Logan",
     DefenisveEnd: "Connor Barwin",
     OutsideLinebacker: "Nigel Bradham",
     MiddleLinebacker: "Jordan Hicks",
     OutsideLinebacker: "Mychal Kendricks",
     Cornerback1:"Leodis McKelvin",
     Cornerback2: "Nolan Carroll",
     Safety1: "Rodney McLeod",
     Safety2: "Malcom Jenkins"
   }
}

Does your football team object look the same? Let’s take it one step further. How can we sub categorize the team into even more granular pieces? Well for starters we can take all the positions that end with a number and put them into a javascript array. We can also create sub objects for the linebackers, the tackles, and the guards.

var footballTeam = {
  Offense:
   {
     WideReceivers: ["Nelson Agholor", "Jordan Matthews", "Dorial Green-Beckham"]
     Tackles: 
        {
          Left: "Jason Peters",
          Right: "Lane Johnson"
        },
     Guards: {
        {
          Left: "Allen Barbre",
          Right: "Brandoon Brooks"
        },
     Center: "Jason Kelce",
     TightEnd: "Zach Ertz",
     RunningBack: "Ran Mathews",
     QuarterBack: "Carson Wentz"
   },
  Defense
   {
     DefensiveEnds: ["Brandon Graham","Connor Barwin"],
     DefensiveTackles: ["Fletcher Cox", "Bennie Logan"],
     Linebackers:
        {
           OutsideLeft: "Nigel Bradham",
           Middle: "Jordan Hicks",
           OutsideRight: "Mychal Kendricks",
        }
     Cornerbacks: ["Leodis McKelvin", "Nolan Carroll"],
     Safeties: "Rodney McLeod", "Malcom Jenkins"]
   }
}

Conclusion

JSON is a useful tool for storing large and small javascript objects. JSON is also a great tool for organizing large amounts of data in Javascript. After completing this lesson you should be comfortable creating your own JSON objects. We have just scratched the surface with the power of JSON. In our next lesson we will work on reading and parsing JSON objects.