In this post, we will learn about the basics of JSON. We will review what JSON is and its advantages. We will also review the syntax and see a comparison of it to XML.

As always if you prefer to watch a video I have this tutorial recorded and available here.

What is JSON?

JSON stands for JavaScript Object Notation. It is a data of representation format used for transferring data between server and clients and is also used for configuration files. JSON serves the same purpose as XML but it has a lot of advantages over XML. We will look at a comparison of JSON and XML later on in this post.

Why use JSON?

Some of the main advantages of using JSON are:

  • Lightweight – by being lightweight, JSON it’s easier to retrieve and load data very quickly
  • Scalable – JSON is language independent which means it can work with most modern programming languages
  • Standard Structure – Having a standard structure makes it easy to read and write the code

JSON vs XML

Now, let’s compare JSON to XML. For our example, we are going to look at an array/group of cats. These cats happen to be my two cats Algebra and Chell.

"cats" : [
   {
      "name" : "Algebra",
      "age" : 10,
      "type" : "Calico"
   },
   {
      "name" : "Chell",
      "age" : 7,
      "type" : "Gray Tabby"
   }
]
<cats>
   <cat>
      <name>Algebra</name>
      <age>10</age>
      <type>Calico</type>
   </cat>
   <cat>
      <name>Chell</name>
      <age>7</age>
      <type>Gray Tabby</type>
   </cat>
</cats>

On the right-hand side, you can see the JSON code, on the left-hand side is the equivalent XML code. Right off the bat, you can see that there are significantly fewer tags for JSON than XML. This example illustrates a few different types in JSON. Here “cats” is an array of objects. Each object has a “name” which is a string, “age” which is a number, and “type” which is another “string”.

JSON Types

JSON can represent several different types:

  • Strings – surrounded by quotes
  • Numbers – there are several representations
  • Booleans – true/false
  • Arrays – surrounded by square brackets [] and commas in between each object
  • Objects – surrounded by curly brackets {}
  • Null

Putting it all together

Now that we have review done a high-level overview of the basics of JSON, let’s make a JSON file. You can make a JSON file by creating a new file and giving it the .json extension. Now to point you can have a JSON file with one value in it, for example, your JSON file has only “cat” or true in the file and that would be valid JSON. This isn’t exactly useful though and if you want to expand the file in the future doesn’t really work.

Let’s use our array of cats example from earlier as our starting point.

"cats" : [
   {
      "name" : "Algebra",
      "age" : 10,
      "type" : "Calico"
   },
   {
      "name" : "Chell",
      "age" : 7,
      "type" : "Gray Tabby"
   }
]

Now, let’s say we wanted to add another object, for example, an array of dogs. After the closing square back of cats and a comma and then “dogs”. In this array, we will have 1 dog, I added my dog, Leela who is 5 years old and is a mutt. Our JSON file now looks like this:

"cats" : [
   {
      "name" : "Algebra",
      "age" : 10,
      "type" : "Calico"
   },
   {
      "name" : "Chell",
      "age" : 7,
      "type" : "Gray Tabby"
   }
],
"dogs" : [
   {
      "name" : "Leela",
      "age" : 5,
      "type" : "Mutt"
   }
]

Let’s say we want to also capture whether or not the animals are spayed or neutered, so let’s add a property “isFixed” which will be a boolean that captures whether or not the animal is fixed. In my case, all my animals are fixed. Our JSON file now looks like this:

"cats" : [
    {
       "name" : "Algebra",
       "age" : 10,
       "type" : "Calico",
       "isFixed" : true
    },
    {
       "name" : "Chell",
       "age" : 7,
       "type" : "Gray Tabby",
       "isFixed" : true
    }
 ],
 "dogs" : [
    {
       "name" : "Leela",
       "age" : 5,
       "type" : "Mutt",
       "isFixed" : true
    }
 ]

Maybe this file also contains an array of birds but because I do not have any birds I can capture my information two ways. I could have an empty array of birds like below:

 "birds" : []

Or I could say my object birds is null.

 "birds" : null

Congratulations you have just learned the basics of JSON.