What Is JSON And How To Use It?

Continuing JavaScript tutorials let’s talk about JSON. JSON – JavaScript Object Notation, is a format for sharing data. Although as its name suggests, JSON is derived from JavaScript, actually it’s available for use in many languages including, Python, Ruby, PHP, and JAVA. And if you are wondering, then yes, JSON is pronounced like the name “Jason”.

JSON uses the .json extension. Or when it’s defined in another format like HTML, it can be inside of quotes as a JSON string or it can be an object assigned to a variable. This format is easy to transmit between the web server and a client or browser.

JSON is very readable and lightweight and requires much less formatting in comparison to XML. Now that you have an idea of what JSON is let’s dive deeper into it and find out what data you can use in JSON files and what basic structure and syntax look like.

JSON Syntax And Structure

A JSON object is a key-value data format that is written in curly braces. As I mentioned earlier JSON can be put in its file with a .json ending and it can exist as a JSON object or string in other files like .html.

A JSON object looks something like this:

{
  "first_name" : "Paul",
  "last_name" : "Doe",
  "location" : "USA",
  "online" : true,
  "followers" : 132
}

I want to note that it is a very short example. JSON can be very long, but basically what you see is that its format is set up with two curly braces (or brackets) on both ends of it with key-value pairs populating the space between.

Key-value pairs have a colon between them. Each key-value pair is separated by a comma.

JSON keys are on the left side of the colon and they need to be wrapped in double quotation marks. The key can be any valid string. But keep in mind keys must be unique in every JSON object. And although they can contain white space like “john doe” that might lead to problems later when you are programming. So it’s best to use underscores like “john_doe”.

On the right side of the colon is JSON values. They can be strings, numbers, arrays, booleans, null, or other objects.

Each of the data types that are passed in as values into JSON will maintain their syntax, so strings will be in quotes, but numbers will not be.

Although in .json files, you will typically see the format expanded over multiple lines, JSON can also be written all in one line.

Just like:

{ "first_name" : "Paul", "last_name": "Doe",  "online" : true, "followers" : 12354 }

Writing the JSON format on multiple lines often makes it much more readable, especially when dealing with a large data set. Because JSON ignores whitespace between its elements, you can space out your colons and key-value pairs to make the data even more readable:

{
  "first_name"  :  "Paul",
  "last_name"   :  "Doe",
  "online"      :  true,
  "followers"
   :  1365
}

Worth noticing that a JSON object is not the same as a JavaScript object. You can use functions within JavaScript objects, but you can’t use them as values in JSON. The main benefit of JSON is that it can be easily transferred between different programming languages in a format that all of them can work with.

Complex Types In JSON

Just like I mentioned, JSON can contain nested objects and nested arrays. These objects and arrays will be passed as values assigned to keys and typically will be comprised of key-value pairs.

JSON Nested Objects

Let’s say you have a hotels.json file with four hotels in it. For each of the hotels, there is a nested JSON object as the value with their nested keys of “director” and “location” that relate to each of the hotels.

{
  "hotel1" : {
    "director"  : "Paul_Doe",
    "location"  : "New York",
    "pool"    : true,
    "guests" : 987
  },
  "hotel2" : {
    "director"  : "Sam_Doe",
    "location"  : "Los Angeles",
    "pool"    : false,
    "guests" : 432
  },
  "hotel3" : {
    "director"  : "Jullie_Doe",
    "location"  : "San Fran",
    "pool"    : false,
    "guests" : 321
  },
  "hotel4" : {
    "director"  : "Mark_Doe",
    "location"  : "London",
    "pool"    : true,
    "guests" : 654
  }
}

In the example above, curly braces are used throughout to form a nested JSON object with associated director and location data for each of the four hotels. Just like any other value, when using objects, commas are used to separate elements.

JSON Nested Arrays

Data can also be nested within the JSON format by using JavaScript arrays that are passed as a value. As you may know, JavaScript uses square brackets on either side of its array. Arrays are ordered collections and can contain values of differing data types.

You may use an array when you are dealing with a lot of data that can be easily grouped, like when there are various websites and social media profiles associated with a single user.

{
  "first_name" : "Paul",
  "last_name" : "Doe",
  "location" : "Earth",
  "websites" : [
    {
      "description" : "work",
      "URL" : "https://www.simplywebstuff.com/"
    },
    {
      "desciption" : "blog",
      "URL" : "https://www.simplywebstuff.com/blog"
    }
  ],
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/simplywebstuff"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/simplywebstuff"
    },
    {
      "description" : "github",
      "link" : "https://github.com/totaldc"
    }
  ]
}

The “websites” key and “social_media” key each use an array to nest information belonging to Paul’s 2 website links and 3 social media profile links. You know that those are arrays because of the use of square brackets.

Using nesting within our JSON format lets you work with more complicated and hierarchical data.

Tl;Dr

JSON is a lightweight format that enables you to easily share, store, and work with data. As a format, JSON has been experiencing increased support in APIs. Most likely you won’t be creating your own JSON files but using them from other sources, so it is important to think less about JSON’s structure and more about how to best use JSON in your programs.