JavaScript and JSON Essentials - Second Edition

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:

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 retrieveisStudent 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
  $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

?>

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

$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));

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

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)

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

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

print json.loads(student_json)

[
{
    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.