What Is JSON And How To Use It?

Posted by TotalDC

Continuing JavaScript tutorials let’s talk about JSON. JSON – JavaScript Object Notation, is a format for sharing data. Although as it’s name sugest, JSON is derived from JavaScript, but actually it’s available for use by many languages including, Python, Ruby, PHP, 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 web server and client or browser.

JSON is very readable and lightweight and requires much less formatting in comparison to XML. Now when you have an idea 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 looks like.

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 it’s own file with .json ending and it can exist as 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 very short example. JSON can be very long, but basically what you see is that it’s 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 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. 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. And 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 own 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 in order to make the data even more readable:

  "first_name"  :  "Paul",
  "last_name"   :  "Doe",
  "online"      :  true,
   :  1365

Worth noticing that JSON object is not the same as a JavaScript object. You can use functions within JavaScript objects, you can’t use them as values in JSON. 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.

Nested Objects

Let’s say you have hotels.json file with four hotels in it. For each of the hotels there is a nested JSON object as the value with their own 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 four hotels. Just like any other value, when using objects, commas are used to separate elements.

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 we are dealing with a lot of data that can be easily grouped together, 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.


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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: