---
title: "Introduction to JavaScript Object Notation (JSON)"  
description: "JSON is smaller than XML, and faster and easier to parse. JSON (an acronym for JavaScript Object Notation) is a lightweight text-based open standard d"  
author: "Anonymous User"  
published: 2012-05-08  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/937/introduction-to-javascript-object-notation-json  
category: "json"  
tags: ["json"]  
reading_time: 4 minutes  

---

# Introduction to JavaScript Object Notation (JSON)

Introduction:\

JSON is smaller than XML, and faster and easier to parse. JSON (an acronym for JavaScript Object Notation) is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript [programming language](https://www.mindstick.com/articles/332896/top-5-programming-languages-for-ios-app-development) for representing simple [data structures](https://www.mindstick.com/blog/301312/data-structures-and-their-applications) and associative arrays, called objects. JSON is syntax for storing and exchanging text information.

JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

##### JSON is built on two structures:

· A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or [associative array](https://www.mindstick.com/forum/606/length-of-javascript-object-ie-associative-array).

· An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

JSON is not only a syndication format (e.g. an alternative to XML); it is a language-independent data interchange format.

##### History of JSON:

The name behind popularizing the JSON is **Douglas Crockford**. He used JSON is his company State Software around 2001. In 2005, Yahoo started using JSON in its [web services](https://www.mindstick.com/articles/942/basics-of-asp-dot-net-web-services). In later 2006, Google started offering JSON in its **GData Web Protocol**. Today, JSON is one of the most widely used data-interchange format in web, and supported by most of the Web APIs (like Twitter API) to fetch public data and creating applications out of them.

##### Usage of JSON:

Various Web Services and APIs use [JSON format](https://www.mindstick.com/forum/34468/convert-a-string-written-in-json-format-into-a-javascript-object) to provide public data. Using the associated Service / API, you can fetch that data and use it to create applications.

##### Comparison with XML:

Since both JSON and XML are mean to be a data interchange format, there is always a comparison between **JSON** (JavaScript Object Notation) and **XML** (EXtensible [Markup Language](https://www.mindstick.com/interview/234/what-is-markup-language)).

##### Similarities with XML:

· Both (JSON and XML) are plain text.

· Both are ‘self describing’ (human readable).

· Both can be transported using AJAX.

· Both can be parsed using JavaScript.

· Both can be used with modern programming language.

##### Dissimilarities with XML:

· JSON is much quicker to read and write in comparison to XML

· In JSON text can be parsed using JavaScript inbuilt function **eval()**.

· JSON supports data structures(name/value pairs and ordered list of values

· XML is redundant in nature unlike JSON.

##### Why JSON?

For AJAX applications, JSON is faster and easier than XML.

##### Using XML:

· Fetch an XML document

· Use the XML DOM to loop through the document

· Extract values and store in variables

##### Using JSON:

· Fetch a JSON string

· **eval()** the JSON string

##### JSON Syntax Rule:

JSON syntax is a subset of the JavaScript object notation syntax.

· Data is in name/value pairs

· Data is separated by comma

· Curly brackets holds objects

· Square brackets holds arrays

##### JSON name/value pairs:

JSON data is written as **‘name/value’** pairs. A **‘name/value’** pair consists of a field name (in double quotes), followed by a **colon (:)**, and followed by a value:

##### Syntax:

## "firstName" : "Arun Kumar Singh"

Here **‘firstName’** is JSON variable name and **‘Arun Kumar Singh’** is JSON value.

##### JSON Values:

##### A JSON values can be:

· A number(integer and floating point)

· A String (in double quotes)

· A Boolean ([true or false](https://www.mindstick.com/forum/160329/how-can-you-convert-a-value-to-a-boolean-true-or-false-in-javascript))

· An Array (in square brackets)

· An objects(in [curly braces](https://answers.mindstick.com/qa/31876/when-we-use-curly-braces-in-the-string-format-its-not-working-in-c-sharp))

Let’s see an example on how to create [JSON object](https://www.mindstick.com/forum/699/how-to-parse-into-json-object-using-json-parse-in-node-js) with JavaScript.

Example: In this example, simply I have created JSON object and store some values after then set these values into proper names.

```
<html><head>                <title>JSON Object Creation Demo</title>               </head><body><h2>JSON Object Creation in JavaScript</h2> <p>Name: <span id="jname"></span><br />Age: <span id="jage"></span><br />Address: <span id="jstreet"></span><br />Phone: <span id="jphone"></span><br /></p><script type="text/javascript">        // Create JSON object using JavaScript                      var JsonObject= {                                                       // Assign values in JSON variable names.                                                                "name":    "Arun Kumar Singh",                                                                "street":    "Kothapaarcha",                                                                "age":   22,                                                                "phone":  "000 1234567"                                                };                // Set the values in html tags.                                                document.getElementById("jname").innerHTML=JsonObject.name                                                document.getElementById("jage").innerHTML=JsonObject.age                                                document.getElementById("jstreet").innerHTML=JsonObject.street                                                document.getElementById("jphone").innerHTML=JsonObject.phone                </script></body></html>
```

\

Output:

Save the above code in html format and execute in with [web browser](https://answers.mindstick.com/qa/95505/what-are-the-pros-and-cons-of-using-safari-web-browser).

![Introduction to JavaScript Object Notation (JSON)](https://www.mindstick.com/mindstickarticle/ca94e530-c2b4-4be4-a3b3-fa8b67c85b57/images/966a8888-2384-4b35-87f4-2d017147d224.png)

\

---

Original Source: https://www.mindstick.com/articles/937/introduction-to-javascript-object-notation-json

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.