access_time
hourglass_empty
person_outline

What is JSON?

JSON (JavaScript Object Notation) is a format to keep and exchange information that is readable to humans. The file contains only text and uses the extension .json.

In this article, you’ll learn about what JSON is used for and how it can improve your website’s performance.

What Is JSON Used For

JSON is a format that stores structured information and is mainly used to transfer data between a server and a client.

The file is basically a simpler and more lightweight alternative to XML (Extensive Markup Language) which has similar functions.

Developers use JSON to work with AJAX (Asynchronous JavaScript and XML). These formats work well together to achieve asynchronous loading of stored data, meaning that a website can update its information without refreshing the page.

This process is easier to do with JSON than XML/RSS. And today, as many websites are adopting AJAX, the .json file has become very popular.

Furthermore, it allows users to request data from a different domain with a method called JSONP by applying <script> tags. Otherwise, you can’t actually transfer data cross-domains because of the same-origin policy.

JSON Syntax

In order to correctly create a .json file, you have to follow the right syntax.

There are two core elements of a JSON object: Keys and Values.

  • Keys must be strings. They contain a sequence of characters that are surrounded by quotation marks.
  • Values are a valid JSON data type. It can be in the form of an array, object, string, boolean, number, or null.

A JSON object starts and ends with curly braces {}. It can have two or more key/value pairs inside, with a comma to separate them. Meanwhile,  each key is followed by a colon to distinguish it from the value.

Here’s an example:

{"city":"New York", "country":"United States "}

We have two key/value pairs here: city and country are the keys; New York and United States are the values.

Types of Values

Values contain a valid JSON data type, such as:

Array

An array is an ordered collection of values. It is surrounded by square brackets [] and each value inside is separated by a comma.

An array value can contain JSON objects, meaning that it uses the same key/value pair concept. For example:

"students":[      
{"firstName":"Tom", "lastName":"Jackson"},
{"firstName":"Linda", "lastName":"Garner"},
{"firstName":"Adam", "lastName":"Cooper"}
]

Information between the square brackets is array, which has three objects in it.

Object

An object contains a key and value. There is a colon after each key and a comma after each value, which also distinguishes between every object. Both of them are inside quotation marks.

Object, as a value, must follow the same rule as an object. Like so:

“employees”: {"firstName":"Tom", "lastName":"Jackson”}

Here, employees is the key while everything inside the curly braces is the object.

Strings

A string is a set sequence of zero or more Unicode characters. It is enclosed by two double quotation marks.

This example shows that Tom signifies a string as it’s a set of characters inside a double quote.

"firstName":"Tom"

Number

Number in JSON should be an integer or a floating point, such as

{“age”:”30”}

Boolean

You can use true or false as a value, as follows:

{“married”:”false”)

Null

It’s to show that there is no information.

{“bloodType”:”null”}

Stored JSON Data

You have two ways to store JSON data – object and array.  The first one looks like this:

{
"firstName":"Tom",
"lastName":"Jackson",
"gender":"male"
}

Curly braces signify that it’s a JSON object. It involves three key/value pairs which are separated by commas.

In each pair, you have the keys (firstName, lastName, and gender) followed by colons to distinguish them from values (Tom, Jackson, male).

Values in this example are strings. That’s why they are also inside quotation marks, similar to the keys.

Using Arrays

Another method for storing data is array. Take a look at this example:

{
"firstName":"Tom",
"lastName":”Jackson”,
“gender”:”male”,
"hobby":["football", "reading", "swimming"]
}

What differentiates this from the previous method is the fourth key/value pair. Hobby is the key and there are several values (football, reading, swimming) in square brackets, which represents an array.

It can be useful when paired with JSONP to overcome the cross-domain issue. This process works by using what is called callbacks, which will request a specified item in Array without getting a same-origin error.

And luckily Array also supports for loop, that lets you run repeated commands to search multiple data – making the process faster and more effective.

Conclusion

As you can see, JSON is a useful tool to interchange data. It has plenty of advantages:

  • It can asynchronously load information so your website is more responsive and can handle the data stream more easily.
  • You can also use it to overcome cross-domain issues when exchanging data from another site.
  • JSON is simpler and more lightweight than XML.

We hope you got a better understanding of JSON and will be able to manage your website more effectively.

The Author

Author

Irfan F. / @mirfan

Irfan is a member of the Digital Content Writer team at Hostinger. He believes that technology and the internet can help improve our lives significantly. That's why he shares his experience as a WordPress blogger to educate others. In his free time, Irfan enjoys good films and books.

Related tutorials

Leave a reply

Comment*

Name*

Email*

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

Become a part of Hostinger now!

More in Glossary
Top 20 Free Website Speed Test Tools
Close