What’s JSON? The common knowledge format

JSON, or JavaScript Object Notation, is a format used to signify knowledge. It was launched within the early 2000s as a part of JavaScript and progressively expanded to grow to be the most typical medium for describing and exchanging text-based knowledge. As we speak, JSON is the common normal of knowledge trade. It’s present in each space of programming, together with front-end and server-side improvement, programs, middleware, and databases.

This text introduces you to JSON. You will get an outline of the expertise, learn the way it compares to comparable requirements like XML, YAML, and CSV, and see examples of JSON in a wide range of applications and use circumstances.

Somewhat little bit of historical past

JSON was initially developed as a format for speaking between JavaScript purchasers and back-end servers. It shortly gained reputation as a human-readable format that front-end programmers might use to speak with the again finish utilizing a terse, standardized format. Builders additionally found that JSON was very versatile: you could possibly add, take away, and replace fields advert hoc. (That flexibility got here at the price of security, which was later addressed with the JSON schema.)

In a curious flip, JSON was popularized by the AJAX revolution. Unusual, given the emphasis on XML, however it was JSON that made AJAX actually shine. Utilizing REST because the conference for APIs and JSON because the medium for trade proved a potent mixture for balancing simplicity, flexibility, and consistency.

Subsequent, JSON unfold from front-end JavaScript to client-server communication, and from there to system config recordsdata, back-end languages, and all the way in which to databases. JSON even helped spur the NoSQL motion that revolutionized knowledge storage. It turned out that database directors additionally loved JSON’s flexibility and ease of programming.

As we speak, document-oriented knowledge shops like MongoDB present an API that works with JSON-like knowledge buildings. In an interview in early 2022, MongoDB CTO Mark Porter famous that, from his perspective, JSON continues to be pushing the frontier of knowledge.  Not dangerous for an information format that began with a humble curly brace and a colon.

Why builders use JSON

It doesn’t matter what sort of program or use case they’re engaged on, software program builders want a approach to describe and trade knowledge. This want is present in databases, enterprise logic, consumer interfaces, and in all programs communication. There are numerous approaches to structuring knowledge for trade. The 2 broad camps are binary and text-based knowledge. JSON is a text-based format, so it’s readable by each individuals and machines.

JSON is a wildly profitable means of formatting knowledge for a number of causes. First, it is native to JavaScript, and it is used inside JavaScript applications as JSON literals. You may as well use JSON with different programming languages, so it is helpful for knowledge trade between heterogeneous programs. Lastly, it’s human readable. For a language knowledge construction, JSON is an extremely versatile software. Additionally it is pretty painless to make use of, particularly when in comparison with different codecs. 

How JSON works

If you enter your username and password right into a kind on an internet web page, you’re interacting with an object with two fields: username and password. For example, take into account the login web page in Determine 1.

A simple login page. IDG

Determine 1. A easy login web page.

Itemizing 1 reveals this web page described utilizing JSON.

Itemizing 1. JSON for a login web page

   username: “Bilbo Baggins”,
   password: “fkj3442jv9dwwf”

Every little thing inside the braces or squiggly brackets ( {…} ) belongs to the identical object. An object, on this case, refers in essentially the most normal sense to a “single factor.” Contained in the braces are the properties that belong to the factor. Every property has two elements: a reputation and a worth, separated by a colon. These are referred to as the keys and values. In Itemizing 1, “username” is a key and “Bilbo Baggins” is a worth.

The important thing takeaway right here is that JSON does all the things essential to deal with the necessity—on this case, holding the data within the kind—with out lots of additional info. You possibly can look at this JSON file and perceive it. That’s the reason we are saying that JSON is concise. Conciseness additionally makes JSON a superb format for sending over the wire. 


JSON was created as an alternative choice to XML, which was as soon as the dominant format for knowledge trade. The login kind in Itemizing 2 is described utilizing XML.

Itemizing 2. Login kind in XML

  <Username>Samwise Gamgee</Username>

Yikes! Simply taking a look at this type is tiring. Think about having to create and parse it in code. In distinction, utilizing JSON in JavaScript is lifeless easy. Attempt it out. Hit F12 in your browser to open a JavaScript console, then paste within the JSON proven in Itemizing 3.

Itemizing 3. Utilizing JSON in JavaScript

let hobbitJson = {
    identify: "Pippin",
    hometown: "Shire"
console.log(hobbitJson.identify);  // outputs “Pippin”
hobbitJson.bestFriend = "Merry";  // modify the article
console.log(JSON.stringify(hobbitJson)); //output total object

// {"identify":"Pippin","hometown":"Shire","bestFriend":"Merry"}

XML is tough to learn and leaves a lot to be desired by way of coding agility. JSON was created to resolve these points. It is no surprise it has roughly supplanted XML.


Two knowledge codecs typically in comparison with JSON are YAML and CSV. The 2 codecs are on reverse ends of the temporal spectrum. CSV is an historic, pre-digital format that finally discovered its approach to being utilized in computer systems. YAML was impressed by JSON and is one thing of its conceptual descendant.

CSV is an easy checklist of values, with every entry denoted by a comma or different separator character, with an elective first row of header fields. It’s quite restricted as a medium of trade and programming construction, however it’s nonetheless helpful for outputting massive quantities of knowledge to disk. And, after all, CSV’s group of tabular knowledge is ideal for issues like spreadsheets.

YAML is definitely a superset of JSON, that means it’ll assist something JSON helps. However YAML additionally helps a extra stripped-down syntax, supposed to be much more concise than JSON. For instance, YAML makes use of indentation for hierarchy, forgoing the braces. Though YML is typically used as an information trade format, its largest use case is in configuration recordsdata.

Complicated JSON: Nesting, objects, and arrays

Up to now, you have solely seen examples of JSON used with shallow (or easy) objects. That simply means each subject on the article holds the worth of a primitive. JSON can also be able to modeling arbitrary advanced knowledge buildings resembling object graphs and cyclic graphs—that’s, buildings with round references. On this part, you will see examples of advanced modeling through nesting, object references, and arrays.

JSON with nested objects

Itemizing 4 reveals methods to outline nested JSON objects.

Itemizing 4. Nested JSON

let merry = { identify: "Merry",
  bestfriend: {
    identify: "Pippin"

The bestfriend property in Itemizing 4 refers to a different object, which is outlined inline as a JSON literal.

JSON with object references

Now take into account Itemizing 5, the place as a substitute of holding a reputation within the bestfriend property, we maintain a reference to the precise object.

Itemizing 5. An object reference

let merry = { race: "hobbit", identify: “Merry Brandybuck” }
let pippin = {race: "hobbit", identify: “Pippin Took”, bestfriend: merry }
console.log(JSON.stringify(pippin.bestfriend.identify)); // outputs “Merry Brandybuck”

In Itemizing 5, we put the deal with to the merry object on the bestfriend property. Then, we’re capable of receive the precise merry object off the pippin object through the bestfriend property. We obtained the identify off the merry object with the identify property. That is known as traversing the article graph, which is completed utilizing the dot operator.

JSON with arrays

One other sort of construction that JSON properties can have is arrays. These look identical to JavaScript arrays and are denoted with a sq. bracket, as proven in Itemizing 6.

Itemizing 6. An array property

  cities: [ “The Shire”, “Rivendale”, “Gondor” ]

After all, arrays might maintain references to different objects, as effectively. With these two buildings, JSON can mannequin any vary of advanced object relations.

Parsing and producing JSON

Parsing and producing JSON means studying it and creating it, respectively. You’ve seen JSON.stringify() in motion already. That’s the built-in mechanism for JavaScript applications to take an in-memory object illustration and switch it right into a JSON string. To go within the different route—that’s, take a JSON string and switch it into an in-memory object—you employ JSON.parse().

In most different languages, it’s essential to make use of a third-party library for parsing and producing. For instance, in Java there are quite a few libraries, however the most well-liked are Jackson and GSON. These libraries are extra advanced than stringify and parse in JavaScript, however in addition they supply superior capabilities resembling mapping to and from customized sorts and coping with different knowledge codecs.

In JavaScript, it’s common to ship and obtain JSON to servers. For instance with the inbuilt fetch() API.  When doing so, you possibly can routinely parse the response, as proven in Itemizing 7. 

Itemizing 7. Parsing a JSON response with fetch()

  .then((response) => response.json())
  .then((knowledge) => console.log(knowledge));

When you flip JSON into an in-memory knowledge construction, be it JavaScript or one other language, you possibly can make use of the APIs for manipulating the construction. For instance, in JavaScript, the JSON parsed in Itemizing 7 can be accessed like another JavaScript object—maybe by looping by way of knowledge.keys or accessing recognized properties on the info object.

JSON schema and JSON formatter

JavaScript and JSON are extremely versatile, however typically you want extra construction than they supply. In a language like Java, robust typing and summary sorts (like interfaces) assist construction large-scale applications. In SQL shops, a schema supplies an identical construction. When you want extra construction in your JSON paperwork, you should utilize JSON schema to explicitly outline the traits of your JSON objects. As soon as outlined, you should utilize the schema to validate object cases and be sure that they conform to the schema.

One other situation is coping with machine-processed JSON that’s minified and illegible. Thankfully, this drawback is simple to resolve. Simply leap over to the JSON Formatter & Validator (I like this software however there are others), paste in your JSON, and hit the Course of button. You will see a human-readable model that you should utilize. Most IDEs even have a built-in JavaScript formatter to format your JSON.

Utilizing JSON with TypeScript

TypeScript permits for outlining sorts and interfaces, so there are occasions when utilizing JSON with TypeScript is helpful. A category, like a schema, outlines the appropriate properties of an occasion of a given sort. In plain JavaScript there’s no approach to prohibit properties and their sorts. JavaScript courses are like ideas; the programmer can set them now and modify the JSON later. A TypeScript class, nevertheless, enforces what properties the JSON can have and what sorts they are often.


JSON is among the most important applied sciences used within the trendy software program panorama. It’s essential to JavaScript but in addition used as a typical mode of interplay between a variety of applied sciences. Thankfully, the very factor that makes JSON so helpful makes it comparatively straightforward to grasp. It’s a concise and readable format for representing textual knowledge.

Copyright © 2022 IDG Communications, Inc.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button