‘ {“JSON Overview” : true} ’

Avelon Pang
5 min readJun 8, 2021

What is JSON?

Frustrated with web browser limitations, Douglas Crockford developed JavaScript Object Notation (JSON) in 2012. JSON is a lightweight text-based open standard designed for human-readable data interchange that is primarily used to transmit data between a server and web application (as an alternative to XML). You may have noticed that JSON is generally used in the REST (Representational State Protocol) request and response API (Application Program Interface) services, unlike the traditionally used XML (Extensible Markup Language), which contains syntax and tags.

In other words, JSON is a ‘self-describing’ and easy to understand text format for storing and transporting data. Since JSON is a text format, it can easily be sent to and from a server and it is also language independent (can be used by any programming language). Let’s take a look at a few of the JSON syntax rules that keep the format consistent and easy to read.

JSON Syntax and Datatypes

In JSON, the data must always be in key/value pairs with keys in the string format (wrapped in quotations). It is also important that the objects are held within the curly braces ({}) and are each separated by a comma, while arrays are contained within square brackets ([]). Notice that JSON keys (left of the colon symbol) are always string, while values can be any of the following data types:

  • Array — an ordered sequence of values
  • Boolean — true or false
  • Number — integer, Infinity, float (decimal), fraction or exponent
  • Null — empty/void/ ‘not a value’ (different than zero)
  • Object — an unordered collection of key/value pairs
  • String — in double or single-quotes
Note that the JSON boolean format is lowercase, whereas in Python they are capitalized (True/False)
How many datatypes can you identify in this example?

JSON Data Exchange

The only data that can be exchanged between a browser and a sever is text. Since JSON is text, we can easily work with data as Javascript objects! This is possible because we can convert any JavaScript object into JSON before sending the JSON text to a sever while also being able to convert the received JSON text from the server back into JavaScript objects in our programs. We can easily exchange data between the browser and sever by using JSON.parse() and JSON.stringify(). Regardless of where we choose to store this data, we must remember that it has to be in a particular format when sorted.

JSON.parse() converts text data from the server to a JS object or array (text → JS object || array)
JSON.stringify() converts the object or array into JSON to send data to the server (JS object || array → text)

JSON !== JavaScript

Although the JSON is based upon JavaScript syntax, it is important to remember that JavaScript is NOT JSON and to notice the subtle differences between them. For example, the keys in JSON objects are case sensitive and must be wrapped in quotes, unlike the keys in JavaScript objects that do not require the string format. Another distinction is that the JSON object is wrapped in single quotes, while the JavaScript object is not. Another distinction between the two is the file type syntax. The file type syntax for JSON is “.json”, while JavaScript file type syntax is “.js”. If this is overlooked, your code will have syntax bugs lighting up your screen. However subtle, these key differences are important to distinguish.

JSON vs XML

Traditionally, the protocol exchanged data between the client and server via SOAP (Simple Object Access Protocol) used XML (designed to carry data). However, with the introduction of REST, the use of JSON became widely common. Since they are both used to exchange web requests for data transfer, there are some similarities between them. They can both be nested, hierarchical, parsed using a wide variety of languages and are considered intuitive to use.

So, what are the key differences? Unlike XML, JSON has no tag format (<tag>), the storage optimal and it is faster to read and write. Despite these benefits, there are disadvantages to JSON as well. It is critical to be aware that JSON is not as secure as XML and may have some limitations in terms of the supported datatypes.

Which format do you prefer?

Conclusion

In this article we’ve covered what JSON is, the syntax, datatypes, how it is used to exchange data and how it compares to XML. With the provided examples, we can see how the JSON structure is straightforward and readable, regardless of the programming language you’re working with. Although some developers may prefer XML, JSON continues to have great appeal to programmers working in the restrictive web and is still a great choice when transferring small amounts of simple data that is short-lived.

Recommended Articles & Resources:

Happy Coding 😎

--

--

Avelon Pang

Full stack software developer with a passion for applying new technologies and a zest for technical problem solving. Bilingual in English and Mandarin.