To define JSON, we can say it is a text-based, lightweight, and human-readable format for data exchange between clients and servers. JSON is derived from JavaScript and bears a close resemblance to JavaScript objects, but it is not dependent on JavaScript. JSON is language-independent, and support for the JSON data format is available in all popular languages, some of which are C#, PHP, Java, C++, Python, and Ruby.

JSON can be used in web applications for data transfer. Consider the following block diagram of the simple client-server architecture. Assume that the client is a browser that sends an HTTP request to the server, and the server serves the request and responses as expected. This is visualized as in the following screenshot:

In the preceding two-way communication, the data format used is a serialized string, with the combination of key-value pairs enveloped in parentheses; that is JSON!

Prior to JSON, XML was considered to be the chosen data interchange format. XML parsing required an XML DOM implementation on the client side that would ingest the XML response, and then XPath was used to query the response in order to access and retrieve the data. This made life tedious, as querying for data had to be performed at two levels: first on the server side where the data was being queried from a database, and a second time on the client side using XPath. JSON does not need any specific implementations; the JavaScript engine in the browser handles JSON parsing.

XML messages often tend to be heavy and verbose and take up a lot of bandwidth while sending the data over a network connection. Once the XML message is retrieved, it has to be loaded into memory to parse it; let us take a look at a students data feed in XML and JSON.

The following is an example in XML:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- This is an example of student feed in XML -->
<students>
  <student>
    <studentid>101</studentid>
    <firstname>John</firstname>
    <lastname>Doe</lastname>
    <classes>
      <class>Business Research</class>
      <class>Economics</class>
      <class>Finance</class>
    </classes>
  </student>
  <student>
    <studentid>102</studentid>
    <firstname>Jane</firstname>
    <lastname>Dane</lastname>
    <classes>
      <class>Marketing</class>
      <class>Economics</class>
      <class>Finance</class>
    </classes>
  </student>
</students>

Let us take a look at the example in JSON:

/* This is an example of student feed in JSON */
{
  "students" :{
    "0" :{
      "studentid" : 101,
      "firstname" : "John",
      "lastname" : "Doe",
      "classes" : [
        "Business Research",
        "Economics",
        "Finance"
      ]
    },
    "1" :{
      "studentid" : 102,
      "firstname" : "Jane",
      "lastname" : "Dane",
      "classes" : [
        "Marketing",
        "Economics",
        "Finance"
      ]
    }
  }
}

As we notice, the size of the XML message is bigger when compared to its JSON counterpart, and this is just for two records. A real-time feed will begin with a few thousand and go upwards. Another point to note is that the amount of data that has to be generated by the server and then transmitted over the internet is already big, and XML, as it is verbose, makes it bigger. Given that we are in the age of mobile devices where smartphones and tablets are getting more and more popular by the day, transmitting such large volumes of data on a slower network causes slow page loads, hang-ups, and poor user experience, thus driving users away from the site. JSON has come to be the preferred internet data interchange format, to avoid the issues mentioned earlier. Since JSON is used to transmit serialized data over the internet, we will need to make a note of its MIME type.

Let us zoom in on the following block diagram, which shows how the requested data is sent in the client-server architecture mentioned earlier:

A Multipurpose Internet Mail Extensions (MIME) type is an internet media type; it is a two-part identifier for content that is being transferred over the internet. MIME types are passed through the HTTP headers of an HTTP Request and an HTTP Response. The MIME type is the communication of content type between the server and the browser. In general, a MIME type will have two or more parts that give the browser information about the type of data that is being sent either in the HTTP Request or in the HTTP Response. The MIME type for JSON data is application/json. If MIME type headers are not sent across the browser, it treats the incoming JSON as plain text.

Now that we have a basic understanding of JSON, let us work on our Hello World program. This is shown in the snippet that follows:

<!DOCTYPE html>
<html>
  <head>
    <title>Test Javascript</title>
    <script type="text/javascript">
      let hello_world = {"Hello":"World"};
      alert(hello_world.Hello);
    </script>
  </head>
  <body>
    <h2>JSON Hello World</h2>
    <p>This is a test program to alert Hello world!</p>
  </body>
</html>

The preceding program will display Hello World on the screen when it is invoked from a browser.

Let us pay close attention to the script between the <script> tags:

let hello_world = {"Hello":"World"};
alert(hello_world.Hello);

In the first step, we are creating a JavaScript variable and initializing the variable with a JavaScript object. Similar to how we retrieve data from a JavaScript object, we use the key-value pair to retrieve the value. Simply put, JSON is a collection of key and value pairs, where every key is a reference to the memory location where the value is stored on the computer. Now let us take a step back and analyse why we need JSON if all we are doing is assigning JavaScript objects that are readily available. The answer is, JSON is a different format altogether, unlike JavaScript, which is a language.

Now, let us take a quick look at the similarities and differences between JSON and a normal JavaScript object. If we were to create a similar JavaScript object like our hello_world JSON variable from the earlier example, it would look like the JavaScript object that follows:

let hello_world = {"Hello":"World"};

The big difference here is that the key is not wrapped in double quotes. Since JSON key is a string, we can use any valid string for a key. We can use spaces, special characters, and hyphens in our keys, none of which are valid in a normal JavaScript object:

let hello_world = {"test-hello":"World"};

When we use special characters, hyphens, or spaces in our keys, we have to be careful while accessing them:

alert(hello_world.test-hello); //doesn't work

The reason the preceding JavaScript statement doesn't work is that JavaScript doesn't accept keys with special characters, hyphens, or strings. So, we have to retrieve the data using a method where we will handle the JSON object as an associative array with a string key. This is shown in the snippet that follows:

alert(hello_world["test-hello"]); //Hurray! It work

Another difference between the two is that a JavaScript object can carry functions within, while JSON object cannot carry any functions. The example that follows has the property getFullName, which has a function that alerts the name John Doe when it is invoked:

{
  "studentid" : 101,
  "firstname" : "John",
  "lastname" : "Doe",
  "isStudent" : true,
  "classes" : [
    "Business Research",
    "Economics",
    "Finance"
  ],
  "getFullName" : function(){
    alert(`${this.firstname} ${this.lastname}`);
  } 
}

Finally, the biggest difference is that a JavaScript object was never intended to be a data interchange format, while the sole purpose of JSON was to act as a data interchange format.

In the upcoming section, we are going to learn about JSON memory allocation.

In following example, a discussion of JSON compared to a JavaScript object, we arrive at the conclusion that JSON is nothing more than a stringified representation of the object. To understand its storage procedure conceptually, consider the following example:

let completeJSON = {
    "hello": "World is a great place",
    "num": 5
}

Let us divide this concept with respect to the major operations that are performed on a complete JSON. When I say complete JSON, I mean the whole structure and not its subset of key-value pairs. So the first operation is to serialize. Serialization is the process of removing blank spaces as well as escaping the internal inverted quotes (if any) so as to convert the whole structure into a single string. This can be illustrated as follows:

let stringifiedJSON = JSON.stringify(completeJSON);

If you console.log the variable stringifiedJSON, we get the following output:

"{"hello":"World is a great place","num":5}"

In this case, the whole JSON is stored as a normal string. Let's represent it as follows:

In the preceding conceptual block diagram, slot 1 of the memory location is represented by stringifiedJSON with a single input string value. The next type of storage might be parsed JSON. By using the previous snippet, if we parse the stringifiedJSON we get the output as follows:

let parsedJSON = JSON.parse(stringifiedJSON);

The output received will be :

{
    "hello": "World is a great place",
    "num": 5
}

In the preceding representation of JSON, it is clearly identified that the value received is not a string but an object; to be more precise, it is a JavaScript object notation. Now, the notion of storage of JSON in memory is the same as the JavaScript object.

Hence, in this case, the scenario is totally different. Let us visualize it as follows:

Now, let us derive some inferences after observing the memory representation:

• Object storage is not sequential; the memory slots are randomly selected.
  In our case it's slots 4 and 7.
• The data stored in each slot is a reference to the different memory location.
  Let us call it an address.

So, considering our example, we have the fourth slot with the address object.hello. Now, this address is pointing to a different memory location. Assume that the location is the third slot, which is handled by the JavaScript execution context. Thus, the value of parsedJSON.hello is held by the third slot.

Now, let us take a look at a more complex example of JSON. We'll also go over all the datatypes that are supported by JSON. JSON supports six data types: strings, numbers, Booleans, arrays, objects, and null:

{
  "studentid" : 101,
  "firstname" : "John",
  "lastname" : "Doe",
  "isStudent" : true,
  "scores" : [40, 50],
  "courses" : {
      "major" : "Finance",
      "minor" : "Marketing"  
  }
}

In the preceding example, we have key-value pairs of different data types. Now let us take a close look at each of these key-value pairs.

The datatype of the value that "studentid" references is a number:

"studentid" : 101,

The datatype of the value that "firstname" references is a string:

  "firstname" : "John",

In the following snippet, the datatype of the value that "isStudent" references is a Boolean:

  "isStudent" : true,

The datatype of the value that "scores" references here is an array:

  "scores" : [40, 50]

The datatype of the value that "courses" references is an object:

  "courses" : {
      "major" : "Finance",
      "minor" : "Marketing"  
  }

We know that JSON supports six datatypes; they are strings, numbers, Booleans, arrays, objects, and null. Yes, JSON supports null data, and real-time business implementations need accurate information. There might be cases where null was substituted with an empty string, but that is inaccurate. Let us take a quick look at the following example:

let nullVal = "";
alert(typeof nullVal); //prints string
nullVal = null;
alert(typeof nullVal); //prints object

In the preceding example, we are performing some simple operations such as determining the type of an empty string. We are using the typeof operator that takes an operand and returns the datatype of that operand, while on the next line we are determining the type of a null value.

Now, let us implement our JSON object in a page and retrieve the values, as shown in the following snippet:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    let complexJson = {
      "studentid" : 101,
      "firstname" : "John",
      "lastname" : "Doe",
      "isStudent" : true,
      "scores" : [40, 50],
      "courses" : {
          "major" : "Finance",
          "minor" : "Marketing" 
      }
    }; 
  </script>
</head>
<body>
  <h2>Complex Data in JSON</h2>
  <p>This is a test program to load complex json data into a variable</p>
</body>
</html>

To retrieve the id from the variable complexJson, we need to do the following:

alert(complexJson.studentid); //101

To retrieve the name from the variable complexJson, look at the following snippet:

alert(complexJson.firstname); //John

Look at the following code to retrieve isStudent from the variable complexJson:

alert(complexJson.isStudent); //true

Retrieving data from arrays and objects gets a little tricky, as we have to traverse through the array or object. Let us see how values can be retrieved from arrays:

alert(complexJson.scores[1]); //50

In the preceding example, we are retrieving the second element (with index 1, as the array starts from 0) from the scores array. Although scores is an array inside the complexJson object, it is still treated as a regular key-value pair. It is handled differently when the key is accessed; the first thing that the interpreter has to assess when a key is accessed is how to get the datatype of its value. If the retrieved value is a string, number, Boolean, or null, there will be no extra operations performed on the value. But if it is an array or an object, the value's dependencies are taken into consideration.

To retrieve an element from the object inside JSON object, we will have to access the key that is the reference for that value, as shown:

alert(complexJson.courses.major); //Finance

Since objects do not have a numeric index, JavaScript might rearrange the order of items inside an object. If you notice that the order of key-value pairs during the initialization of the JSON object is different from when you are accessing the data, there is nothing to worry about. There is no loss of data; the JavaScript engine has just reordered your object.

Until now, we have seen how parsers in JavaScript support JSON. There are many other programming languages that provide implementations for JSON. Languages such as PHP, Python, C#, C++, and Java provide very good support for the JSON data interchange format. All of the popular programming languages that support service-oriented architectures understand the importance of JSON and its implementation for data transfer, and thus have provided great support for JSON. Let us take a quick detour from implementing JSON in JavaScript, and see how JSON is implemented in other languages, such as PHP and Python.

PHP is considered to be one of the most popular languages for building web applications. It is a server-side scripting language and allows developers to build applications that can perform operations on the server, connect to a database to perform CRUD (Create, Read, Update, Delete) operations, and provide a stately environment for real-time applications. JSON support has been built into the PHP core from PHP 5.2.0; this helps users avoid going through any complex installations or configurations. Given that JSON is just a data interchange format, PHP consists of two functions. These functions handle JSON that comes in via a request or generate JSON that will be sent via a response. PHP is a weakly-typed language; for this example, we will use the data stored in a PHP array and convert that data into JSON string, which can be utilized as a data feed. Let us recreate the student example that we used in an earlier section, build it in PHP, and convert it into JSON:

<?php
  $student = array(
    "id"=>101,
    "name"=>"John Doe",
    "isStudent"=>true,
    "scores"=>array(40, 50);
    "courses"=>array(
      "major"=>"Finance",
      "minor"=>"Marketing"
    );
  );

  //Echo is used to print the data
  echo json_encode($student); //encoding the array into JSON string

?>

This script starts by initializing a variable and assigning an associative array that contains student information. The variable $students is then passed to a function called json_encode(), which converts the variable into JSON string. When this script is run, it generates a valid response that can be exposed as JSON data feed for other applications to utilize.

The output is as follows:

{
    "id": 101,
    "name": "John Doe",
    "isStudent": true,
    "scores": [40, 50],
    "courses":
    {
        "major": "Finance",
        "minor": "Marketing"
    }
}

We have successfully generated our first JSON feed via a simple PHP script; let us take a look at the method to parse JSON that comes in via an HTTP request. It is common for web applications that make asynchronous HTTP requests to send data in JSON format:

$student = '{"id":101,"name":"John Doe","isStudent":true,"scores":[40,50],"courses":{"major":"Finance","minor":"Marketing"}}';
//Decoding JSON string into php array
print_r(json_decode($student));

The output is as follows:

Object(
  [id] => 101
  [name] => John Doe
  [isStudent] => 1
  [scores] => Array([0] => 40[1] => 50)
  [courses] => stdClass 
  Object([major] => Finance[minor] => Marketing)
)

Python is a very popular scripting language that is extensively used to perform string operations and to build console applications. It can be used to fetch data from JSON API, and once the JSON data is retrieved it will be treated as JSON string. To perform any operations on that JSON string, Python provides the JSON module. The JSON module is an amalgamation of many powerful functions that we can use to parse the JSON string on hand:

import json

student = [{
      "studentid" : 101,
      "firstname" : "John",
      "lastname" : "Doe",
   ## make sure we have first letter capitalize in case of boolean
      "isStudent" : True, 
      "scores" : [40, 50],
      "courses" : {
          "major" : "Finance",
          "minor" : "Marketing" 
      }
    }]

print json.dumps(student)

In this example we have used complex datatypes, such as Tuples and Dictionaries, to store the scores and courses respectively; since this is not a Python course, we will not go into those datatypes in any depth.

The output is as follows:

[{"studentid": 101, "firstname": "John", "lastname": "Doe", "isStudent": true, "courses": {"major": "Finance", "minor": "Marketing"}, "scores": [40, 50]}]

The keys might get rearranged based on the datatype; we can use the sort_keys flag to retrieve the original order.

Now, let us take a quick look at how the JSON decoding is performed in Python:

student_json = '''[{"studentid": 101, "firstname": "John", "lastname": "Doe", "isStudent": true, "courses": {"major": "Finance", "minor": "Marketing"}, "scores": [40, 50]}]'''

print json.loads(student_json)

In this example, we are storing the JSON string in student_json, and we are using the json.loads() method that is available through the JSON module in Python.

The output is as follows:

[
{
    u 'studentid': 101,
    u 'firstname': u 'John',
    u 'lastname': u 'Doe',
    u 'isStudent': True,
    u 'courses':
    {
        u 'major': u 'Finance',
        u 'minor': u 'Marketing'
    },
    u 'scores': [40, 50]
}]

This chapter introduced us to the basics of JSON. We went through the history of JSON and understood its advantages over XML. We created our first JSON object and successfully parsed it. Also, we went over all the datatypes that JSON supports. Finally, we went over some examples as to how JSON can be implemented in other programming languages. As we move forward in this journey, we will find the knowledge that we have gathered in this chapter to be a solid foundation for more complex concepts such as accessing multilevel JSON and performing data storage operations on them, which we will be looking at in later chapters.