Understanding JSON – A Comprehensive Guide

Today we will discuss anything you need to know about JSON (Understanding JSON).

Although there is a lot of tutorial on the internet about this topic, this time we will discuss in a different way and dig more deeply so you will really understand all about JSON.

Understanding JSON – What is JSON?

As we already know, JSON is an abbreviation of JavaScript Object Notation.

Now… What JSON really is?

JSON is a text with a certain format used to facilitate the exchange of data between programming languages. What does this mean?

1. Text. Data exchange format always use text, why text? because all programming languages will definitely accept it, right?

2. Between programming language: yes between programming languages (eg PHP to Javascript). Any form of data exchange format is mainly intended for different programming languages, although it can also be used for one programming language.

If the data exchange is done in the same programming language, then many better and safer alternatives that can be used, including using the built-in features of the programming language. E.g. using serialize function in PHP.

JSON Format

JSON syntax based on the ECMAScript 262 Edition 3rd (1999) standard. The example format looks like the following:

	"title": "A Complete Guide to Understanding JSON", 
	"author": "Agus Prawoto Hadi", 

Did you notice that the above format is exactly same as the Javascript object?. Yes, right. It is because JSON inspired by Javascript object literal, as its name JSON = JavaScript Object Notation 🙂

Because fully adopts Javascript, everything used in JSON is covered in Javascript style, e.g. the form of an object, array, string, etc.

Thus, if you familiar with Javascript then there is nothing new here, you can easily learn JSON.

Although the form is similar or even the same as Javascript, JSON remains an independent language means it is not tied to any programming language and has its own writing standards.

Official standard ….

Now, JSON becomes an ECMA International standard, that is in ECMA-404. We can find everything about JSON there, from writing formats, data types, allowed characters, etc.

ECMAScript itself is a standard scripting language, Javascript also uses this standard, so it can be said that Javascript and JSON refer to the same “parent” standard.

Having the same parent, make the syntax identical, this is why JSON and Javascript have identical (same) format.

So, what is the importance of the standard?

This official standard is important because any programming languages will concern to it and provide extensions to supports it, for example, PHP >= 5.2.0 provides built-in functions to manage JSON such as the function: json_encode()

In addition, becoming International standards, the format can persistent (long-lasting).

Extensions and Content Type

JSON extension is .json and the content type is application/json

By assigning standard extension, make it easier to handing json file such as detecting JSON file (when doing file searching with specific programming languages) or just for choosing the default program to open JSON file (in Windows).

While the content type intended for HTTP header in the HTTP Protocol, so browsers can recognize that the content is a json and will treat as it should.

However, if we only focus on the content, then no matter what extension we use, as long as the format of the data meet to the standard specified, then our data will remain valid a JSON.

II. JSON Structure and JSON Data Type

JSON Structure

According to the structure, there are two forms of JSON:

  1. The pairs of key:values In the Javascript programming language, we call it object, or in other programming languages such as PHP, it is an associative array. For example:
    {"name":"Agus Prawoto Hadi", "website":"webdevzoom.com"}

    Furthermore, in JSON the above form is called an object. Note that in the form above, the opening and ending characters are braces.

    JSON With Object Structure

    JSON With Object Structure

  2. Series of values (although the value itself can also be an object). In the Javascript and PHP its name is an array, for example:
    ["Agus Prawoto Hadi", "webdevzoom.com"]

    Furthermore, in JSON the above form is called an array. Note that in the form above, the opening and closing characters are square brackets.

    JSON With Array Structure

    JSON With Array Structure

2. JSON Data Type

Data type here means the type of data that can be used in JSON, they are:

  1. Object. The object is a collection of key and value pairs that enclosed with a bracket (as explained earlier in JSON Structure). Since this object reflects an associative array, it is recommended not to use the same key (the key should be unique). This object may empty and simply write {} for an empty object

    Understanding JSON - Object Data Type

    Understanding JSON – Object Data Type

  2. Array. An array is series of values that enclosed with a square bracket (as illustrated below). Each value is separated by a comma. An array can be empty and just write [] for an empty array.

    Understanding JSON - Array Data Type

    Understanding JSON – Array Data Type

  3. Number. The numbers are 0-9 digits written without quotes. A number can be either integer or decimal. For decimal, it uses a dot separator. For example, to write two points five, we write 2.5 instead of 2,5
  4. Boolean. Boolean is either true and false, written without quotes.
  5. Null. Just write null without quotes.
  6. String. The strings are all Unicode characters, which means all possible characters in this world. A string is the most used data type. While writing a string, we must enclose it with two double quotes (“…”) and not allowed to use a single  (‘…’).

Example of JSON data with several data types:

	"title": "A Complete Guide to Understanding JSON",
	"author": {
			"id" : 1,
			"username" : "agus",
			"name":"Agus Prawoto Hadi"
		  	"first_published" : "2018-01-15",
		  	"revision" : ["2018-01-31", "2018-01-15"]
	"allow_comment" : true,
	"comment" : [
			"id": 1,
			"name" : "John",
			"date": "2018-02-01",
			"comment" : "..."
			"id": 2,
			"name" : "Doe",
			"date": "2018-02-05",
			"comment" : "..."
	"pingback" : null

In the example above, the structure of JSON is Object. Notice that there are object within object it is called nested object, for more details about the above structure, see the following figure:

Example of JSON Data Type

Example of JSON Data Type

Next, here’s an example of JSON data with an array structure:

		"title" : "A Complete Guide to Understanding JSON",
		"author": {
				"id" : 1,
				"username" : "agus",
				"nama":"Agus Prawoto Hadi"
		"title" : "Understanding JSON in PHP",
		"author": {
				"id" : 1,
				"username" : "agus",
				"nama":"Agus Prawoto Hadi"

II.1 STRING Data Type

As mentioned earlier, String is the most commonly used data types. This data type is somewhat complicated when applied to JSON, so we need a further discussion.

Must use double quotes

In the previous section we mention that the string should be enclosed using double quotes, if we use a single quote then it will be failed to be parsed, for example:

$json = '{"title" : "Understanding JSON - A Comprehensive Guide"}';
$parse = json_decode($json, true);
print_r($parse); // Result: blank page

So… always use double quotes

Special Characters

It also important to note that if there are special characters in the string, then we must escape it using a backslash (\). The special characters are:

Character Escaped Character Name
\” Double Quote
/ \/ Solidus (slash)
\ \\ Reverse solidus (Backslash)
r \r Carriage return
n \n Line feed
t \t Tabulation (tab)
b \b Backspace
f \f Form feed

In the real world, there are several special characters that used in frequent, that are: double quotes, slashes, and backslashes, for example:

	, "path" : "\\public\\img\\"
	, "permalink" : "http:\/\/webdevzoom.com\/public\/img\/json_logo.png"
	, "title" : "Officel JSON Logo"
	, "description" : "Official JSON Logo. JSON is abbreviation of \"Javascript Object Notation\""

III. Implementation of JSON

In day to day programming, the JSON format can be used for several purposes, such as for providing data for AJAX load and for configuration files. Let’s discuss it deeper:


JSON is widely used in AJAX technology (Javascript based), as popular today, AJAX used to change the content of a web page without refreshing its page.

Previously AJAX uses XML as a data feed, as its name (Asynchronous Javascript And XML), but now, JSON widely used for AJAX data feed, it is more easy to implement than XML, because there is a built-in parser (JSON.parse()).

As an example, let’s look a pagination system.

When user clicks on a page number, the application simply retrieves raw data only, without having to load a full page of HTML documents, for example when we open this URL:


and click the page number button of “2”, the page doesn’t refresh, the list of products changed and the URL becomes https://www.udemy.com/courses/search/?q=javascript&p=2

Page 2 - Search Result of Javascript Keyword on Udemy.com

Page 2 – Search Result of Javascript Keyword on Udemy.com

What just happen? when clicking the button, in the background, the application takes a lot of requests, one of them is a JSON data that contain search result on page 2. The JSON data looks like the following (only small part):

{"aggregations": [{"id": "instructional_level", "title": "Level", "key": "instructional_level", "all_title": "All Levels", "options": [{"title": "All Levels", "key": "instructionalLevel", "url": "/api-2.0/search-courses/?q=javascript&src=ukw&instructionalLevel=all", "count": 389, "value": "all"}, {"title": "Beginner", "key": "instructionalLevel", "url": "/api-2.0/search-courses/?q=javascript&src=ukw&instructionalLevel=beginner", "count": 297, "value": "beginner"}, {"title": "Intermediate", "key": "instructionalLevel", "url": "/api-2.0/search-courses/?q=javascript&src=ukw&instructionalLevel=intermediate", "count": 128, "value": "intermediate"}, {"title": "Expert", "key": "instructionalLevel", "url": "/api-2.0/search-courses/?q=javascript&src=ukw&instructionalLevel=expert", "count": 19, "value": "expert"}], "open": true}}

You can find that JSON data through Developer Tools (Network > Name > Response)

HTTP Response on Google Chrome

HTTP Response on Google Chrome

Furthermore, the web application process the JSON data and change the content of the web page with list of courses along with its description.

Let’s take another example, now we want to share our data with others, for example, with PHP, I create JSON data that contain 9 last article of webdevzoom.com.

The JSON data appears as follows (for one article):

		"post_title": "Understanding JSON - A Comprehensive Guide",
		"excerp": "This article helps you understanding JSON in an easy way and will make you have a better understanding in JSON. This also contains some examples of real-world implementation. In addition, we'll discuss some tools that can help us work easier with JSON.",
		"category": "JSON",
		"post_date": "2018-01-29 23:11:50",
		"post_url": "http://webdevzoom.com/understanding-json-a-comprehensive-guide/",
		"author": {
			"link": "http://webdevzoom.com/author/agusph",
			"name": "Agus Prawoto Hadi"
		"feature_image": {
			"alt": null,
			"url": null

Others can request the data by accessing an URL, then use it as they need.

For complete JSON data can be seen here: Webdevzoom Last Article

On the two examples above, the JSON data has no extension of .json but the content remains meet the JSON standard and it is still a valid JSON data.

Note: More about the implementing JSON in PHP and Javascript will be discussed in a separate article.

2. Configuration File

Another example of JSON data is in a configuration file.

In this case, the extension of the file is .json with this extension we can immediately know that the content of the file is a JSON.

For example, here is a .json file that exists when installing a package using composer:

Example of JSON File - Composer.json

Example of JSON File – Composer.json

The content of the file looks like the following:

    "name": "php-http/httplug",
    "description": "HTTPlug, the HTTP client abstraction for PHP",
    "license": "MIT",
    "keywords": ["http", "client"],
    "homepage": "http://httplug.io",
    "authors": [
            "name": "Eric GELOEN",
            "email": "geloen.eric@gmail.com"
            "name": "Márk Sági-Kazár",
            "email": "mark.sagikazar@gmail.com"
    "require": {
        "php": ">=5.4",
        "psr/http-message": "^1.0",
        "php-http/promise": "^1.0"
    "require-dev": {
        "phpspec/phpspec": "^2.4",
        "henrikbjorn/phpspec-code-coverage" : "^1.0"
    "autoload": {
        "psr-4": {
            "Http\\Client\\": "src/"
    "scripts": {
        "test": "vendor/bin/phpspec run",
        "test-ci": "vendor/bin/phpspec run -c phpspec.ci.yml"
    "extra": {
        "branch-alias": {
            "dev-master": "1.1-dev"

Or.. we could create our own .json file for website configuration, we name the file config.json with the following content:

	"database" : {
		"host" : "localhost",
		"user" : "myusername",
		"pass" : "mypassword"
	"theme" : {
		"name"  : "elegant",
		"color" : "blue",
		"font"	: {
				"family" : "arial, verdana",
				"size" : "12px",
				"color" : "#DDDDDD"

Note: you should very careful when creating configuration file using a downloadable file (.txt, .json, .ini, etc…) as it will potentially expose that data to public.

IV. JSON Viewer and JSON Formatter

1. JSON Viewer

For a simple JSON data, we can easily identify and read its structure, but in a complex JSON data (contains a lot of value and child), it will be hard, therefore we need tools for making it more readable, such as JSON Viewer.

This tools will create a JSON tree from the existing JSON string.

JSON as a string

If the JSON data came from a text or string, we can use JSON Viewer from http://jsoneditoronline.org/ or https://codebeautify.org/jsonviewer

Just copy and paste the existing JSON string and we’ll immediately see the JSON Tree, for example:

Buid JSON Tree Using JSON Viewer

Build JSON Tree Using JSON Viewer


If JSON data came from URL so we can open it from a browser, for example, list of course from Udemy.com, then we can see the JSON Tree through developer tools, for example:

JSON Viewer on Google Chrome - Site Udemy.com

JSON Viewer on Google Chrome – Site Udemy.com

Or we can use a browser add-on such as JSON Viewer (Google Chrome). Using this add-on, when we open a page that has full JSON data, the plugin will automatically convert it into a JSON tree, like the following example:

JSON Viewer (addon) on Google Chrome

JSON Viewer (addon) on Google Chrome

2. JSON Formatter

For certain purposes, we want to make our JSON data more readable (has enough indentation, tab, and space). To so so, we need a tool such as JSON Formatter.

There are several JSON Formatter that we can try. For online tools: https://codebeautify.org/jsonviewer, https://jsonlint.com/, or https://jsonformatter.org/ while for offline, we can use a browser extension, such as JSON Viewer (Google Chrome)


Although our discussion here is about JSON,  but we need to discuss a bit about XML, why? because XML is very popular data exchange format before JSON.

What is the difference between JSON and XML?

1. The size… (JSON is Smaller than XML)

JSON is smaller about 30% than XML, this is because to provide the same information, the number of characters used in JSON is fewer than XML.

Since both are text, the file size (in bytes) is calculated based on the number of characters used, for example here is a simple comparison between JSON and XML:

JSON (95 bytes)
{"title": "Comprehensive Guide to Understanding JSON", "author": "Agus Prawoto Hadi", "date": "2018-01-31"}

XML (168 bytes)
<?xml version="1.0" encode="utf-8">
<title>Comprehensive Guide to Understanding JSON</title>
<author>Agus Prawoto Hadi</author>

From the above comparison, we can see that the XML uses more characters, more character = more larger in size.

This size difference becomes a reason why many people choose JSON over XML, especially when using HTTP protocol (internet), because smaller data = faster load time and smaller bandwidth used.

But wait… in XML, values can be placed on the element attribute so that can reduce the file size, just like below:

XML (130 bytes)
<?xml version="1.0" encode="utf-8">
<article title="Comprehensive Guide to Understanding JSON" author="Agus Prawoto Hadi" date="2018-01-31" />

but it is uncommon and has many limitations, after all the file size still larger than JSON.

2. Programming Language Support

Parsing JSON and XML

Many programming languages such as Javascript and PHP provide several ways to parsing JSON and XML data.

For Javascript, XML is treated like an HTML element so that the parsing technique is the same as parsing the HTML element (using DOM), in many cases this is troublesome.

But for JSON, Javascript can directly parse/convert it into Javascript object (using built-in function/libraries), and… accessing object is much easier than accessing DOM element.

Building JSON and XML

In Javascript, building JSON data is very easy because there is a built-in function, that is JSON.Stringify (or we can use the jQuery library).

While for building XML data, the process is more complicated because we need to build DOM structure, just like HTML document, so that we need to employ various functions related to DOM.

From above comparison, it can be concluded that in Javascript, JSON is easier to use than XML.

Wrap Up

JSON is a standard format for data exchange and today, it widely used for Internet data exchange (HTTP protocol) due to the small file size, faster load time, and small used of bandwidth.

With a simple structure, the JSON format is easier to use than other formats. We will get more benefit when using it with Javascript, like its abbreviation (JavaScript Object Notation).




Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Our Commitment: We respect your privacy, we'll not share your credential to any party

Leave a comment

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

Like Us


Great information from webdevzoom.com right to your inbox

  1. Understanding JSONP – With Javascript and jQuery Examples

  2. JSON With Javascript and Ajax

  3. JSON From Database – PHP and MySQL

  4. JSON in HTML Document

  5. JSON With PHP – A Complete Guide

  6. Understanding JSON – A Comprehensive Guide

  7. 7 Best Free Online Image Compressor & Optimizer Tools – Compared & Tested

  8. 40+ Modern Free WordPress Themes For Blog in 2017 – Beautiful & Responsive

  9. Understanding Constant in PHP – Updated to PHP 7

  10. Understanding Variable in PHP – All PHP Version