JavaScript and JSON Essentials - Second Edition

By Bruno Joseph D'mello , Sai Srinivas Sriparasa
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started with JSON

About this book

JSON is an established and standard format used to exchange data. This book shows how JSON plays different roles in full web development through examples. By the end of this book, you'll have a new perspective on providing solutions for your applications and handling their complexities.

After establishing a strong basic foundation with JSON, you'll learn to build frontend apps by creating a carousel. Next, you'll learn to implement JSON with Angular 5, Node.js, template embedding, and composer.json in PHP. This book will also help you implement Hapi.js (known for its JSON-configurable architecture) for server-side scripting.

You'll learn to implement JSON for real-time apps using Kafka, as well as how to implement JSON for a task runner, and for MongoDB BSON storage. The book ends with some case studies on JSON formats to help you sharpen your creativity by exploring futuristic JSON implementations. By the end of the book, you'll be up and running with all the essential features of JSON and JavaScript and able to build fast, scalable, and efficient web applications.

Publication date:
April 2018
Publisher
Packt
Pages
226
ISBN
9781788624701

 

Chapter 1. Getting Started with JSON

JSON (JavaScript Object Notation) is a very popular data interchange format. It was discovered by Sir Douglas Crockford. According to Douglas, JSON always existed in terms of object notation, so he didn't invent it. He was the first person to provide the specifications and engineer JSON so that it can be used as a standardized format.

In this chapter, we are going to cover the following topics:

  • What JSON is
  • How JSON is implemented using a simple Hello World program
  • How JSON is stored in memory
  • Datatypes in JSON
  • Various languages that support JSON
  • PHP and Python explained in brief

Now for all the beginners, who have just heard the term JSON for the first time, the following section helps to visualize it in detail.

 

JSON, a data exchange format


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.

Note

Nowadays, the content-type key, which is derived from mime-type itself, is used in the headers.

 

The Hello World program with JSON


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.

Note

We are using let, which is a new ecmascript identifier. It differs from the normal variable declaration identifier, var, with respect to scoping. The former is scoped to the nearest function block while the latter is scoped to the nearest enclosing block. For more details please refer to the following URL: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let.

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.

Note

JSON keys and values have to be enclosed in double quotes. If either is enclosed in single quotes, we will receive an error.

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}`);
  } 
}

Note

Note that the string interpolation feature is a new ES feature that can be used when writing variables and functions inside the expression `${}`. The expression only works in tilde inverted commas and not in other types of inverted commas.

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.

 

How is JSON stored in memory?


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.

Note

Assume that we are using a JavaScript engine to interpret code.

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.

 

Datatypes in JSON


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

Note

Arrays and null values are objects in JavaScript.

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.

 

Languages that support JSON


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.

JSON implementation in PHP

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:

Note

This example is only intended to show you how JSON can be generated using PHP.

<?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

?>

Note

To run a PHP script, we will need to install PHP. To run a PHP script through a browser, we will need a web server, such as Apache or IIS. We will go through the installation in Chapter 3, AJAX Requests with JSON, when we work with AJAX.

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:

Note

This example is only intended to show you how JSON can be ingested into PHP.

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

JSON implementation in Python

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:

Note

This example is only intended to show you how JSON can be generated using Python.

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.

Note

To run this script, Python2 needs to be installed. It comes preinstalled on any *nix operating system. Play with our code in Python with the following online executor: https://www.jdoodle.com/python-programming-online.

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:

Note

This example is only intended to show you how JSON can be ingested into 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]
}]
 

Summary


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.

About the Authors

  • Bruno Joseph D'mello

    Bruno Joseph D'mello is proactively working at Truckx as a full stack developer. He is a JavaScript enthusiast and loves working with open source communities. He possesses more than 6 years' experience in web development. Bruno follows kaizen and enjoys the freedom of architecting new things at work. He is socially active via coaching in web technologies and participating in other research projects and meetups.

    When not engaged with technology, Bruno likes to spend quality time traveling with family and friends.

    Browse publications by this author
  • Sai Srinivas Sriparasa

    Sai Srinivas Sriparasa is a web developer and an open source evangelist living in the Stamford area. Sai was the lead developer for building Dr. Oz’s website, and has led teams for companies such as Sprint Nextel, West Interactive, and Apple. Sai’s repertoire includes JavaScript, PHP, Python, HTML5, responsive web development, ASP.NET, C#, and Silverlight.

    Browse publications by this author

Recommended For You

The JavaScript Workshop

Cut through the noise and get real results with a step-by-step approach to beginner JavaScript development

By Joseph Labrecque and 7 more
Professional JavaScript

Develop your JavaScript programming skills by learning strategies and techniques commonly used in modern full-stack application development

By Hugo Di Francesco and 3 more
Advanced JavaScript

Gain a deeper understanding of JavaScript and apply it to build small applications in backend, frontend, and mobile frameworks.

By Zachary Shute
Node.js Web Development - Fourth Edition

Create real-time applications using Node.js 10, Docker, MySQL, MongoDB, and Socket.IO with this practical guide and go beyond the developer's laptop to cover live deployment, including HTTPS and hardened security.

By David Herron