If you’re a developer, you’ve likely heard of JSON. JSON, which stands for JavaScript Object Notation, is a text-based data interchange format that’s based on JavaScript object syntax. We’ve briefly touched on JSON in our “What is JavaScript?” article, and in our guide comparing Infura alternatives. Nevertheless, JSON is important enough for web development (and Web3 development) that it deserves a guide of its own. As such, let’s dive into JavaScript Object Notation to answer “what is JSON?”.
When working with Moralis, however, you don’t even need to know all the nitty-gritty details of JSON. You’ll likely already know that the Moralis Real-Time Database enables you to store JSON data, and sync any data between users in real-time. Moralis is all about ease of use, so the Moralis SDK is designed so that you won’t need to worry about how data is stored. However, there are situations when it can be helpful to get some insight into how data is stored on the Moralis platform. Specifically, Moralis stores internal data as JSON, meaning that any type of data that can be converted to JSON can be stored on Moralis. If you want more technical information about how Moralis handles data storage internally, be sure to check out our official documentation on Data Storage. Sign up for Moralis for free today to supercharge your Web3 and dApp development! More information about how Moralis works with files is available in the following YouTube Moralis file tutorial:
Understanding JavaScript Object Notation
JSON is an important part of any developer’s practical toolkit. If you are not familiar with it yet, it would be great to learn a few basics so you can understand the principles behind JSON and what JSON is used for. The topic will likely turn up in the course of developing a web app or any kind of website, so it’s better to be prepared. JSON offers several advantages that give you an edge in developing better and faster websites, so it’s useful to understand JSON.
As stated before, JSON is an acronym that stands for JavaScript Object Notation. The acronym was coined by a company called State Software and is further attributed to its co-founder Douglas Crockford, who originally popularized JSON. As the name has no vowels, some people are unsure of how to pronounce it – whether it’s pronounced like the name “Jason” or more like how it’s commonly read, which is with emphasis on the second syllable: “Jay-sawn”. Some references cite that the correct pronunciation is “Jason” but its originator is also on record saying that he doesn’t care. As such, the “correct pronunciation” of JSON is an old case of “potay-to, potah-to”.
JSON is worth studying because of its usefulness in organizing and sending data, making it easier for anyone to structure or configure data in the process of building whatever they want on the web. It allows you to create more interactive websites and lightens the data load.
The format was created because, at one point, there arose a clear need for a server-to-browser communication protocol that was stateless and could work in real-time. Remember Flash? Sounds a bit archaic now, doesn’t it? At one point, Flash and Java “applets” were mainly used for this purpose. Not anymore.
What is JSON? A Bit of Backstory
Today, JSON has surpassed XML as the world’s preferred data interchange format for web services and applications. Nevertheless, this wasn’t always the case. Let’s, therefore, go back to the humble beginnings of what we today know as JSON. One of the earliest websites that applied a similar principle to today’s JSON libraries was a game called Cartoon Orbit, created for Cartoon Network. It opened the doors to a new type of interactivity. It was a digital asset trading game for kids. The game used a browser-side plug-in that had its proprietary messaging format used in the manipulation of Dynamic HTML elements. Around this time, developers were still in the process of discovering the early capabilities of Ajax. They found a way to use frames to pass information into a user browser’s visual field without the previous need to constantly refresh the visual context of a web application. This aha moment led to the realization of real-time web applications using only standard HTTP, HTML, and JavaScript capabilities of the popular browsers of that time.
These early origins help you understand what JSON is used for. It evolved as a tool to solve similar issues and was inspired by such early attempts.
What is JSON Used For?
The answer for what JSON could be used for came soon therafter. In a press release back in 2002, State Software announced a State Application Framework, or SAF, that claimed to reduce the time that developers required to create interactive web applications. This new SAF also had the advantages of providing a better user experience and reducing deployment costs.
Developers would for the first time be able to build “distributed sessionful applications”. Back then, web interactivity was defined differently than today. Interactivity didn’t seem like interactivity at all. Websites were still slow and cumbersome. This was partly because of the unnecessary complexity behind web applications. User experience undoubtedly paid for such inefficiencies. E-commerce or online transactions had to be done one page at a time – meaning, they were static and tedious. The entire process needed to be brought from the client to the server and back. This endless process of passing on data and a web running one page at a time was coming to an end.
Advantages of JavaScript Open Notation
This new structural framework’s dynamic features dramatically changed the static processes of old. In a way, this, which would lead to the advent of JSON, became a move from statelessness to “statefulness”. One of the new advantages of such a framework, apart from the obvious seamlessness and interactivity on the part of the user, was its ability to speed up development on the creators’ side. It enabled projects to reduce time to market and therefore cut costs on labor and other operations. It also allowed one to cut down on hardware and software, further lowering costs.
For the first time, we had web applications that appeared smoother to interact with. It was all about the ease of the end-user. One could feel the step reduction by just interacting with a site. A cumbersome series of dozens of steps could be reduced to one or two. While it simplified the process, it also improved it. This had tremendous implications for supply chain inventories which could now be accessed and managed in real-time.
Linear and serial processes were replaced by real-time interactivity delivered by constant two-way interaction. The new process of structuring data created a leap from static pages to interactive ones that allowed for dynamic updates.
A Two-Way Communication Layer
The principle behind the new framework was to introduce a new two-way abstraction or duplex communication layer, which creates an interactive session with the browser of an end-user.
Once this interactive session is established, it opens up a faster way of updating the site. The persistent layer or connection does away with the old process of constantly having to reload a website. It held a duplex connection to web servers by holding two HTTP connections open. It recycled the HTTP connections before set browser time-outs if it saw that there was no further interchange of data. Through this framework, one can transmit changed content without having to go the long route.
The new framework built on Java is also scalable and redundant, capable of using multiple “state session servers” to hold active sessions with a browser. It’s a combination of less information plus a persistent connection. The idea proposed a triple win for users, companies, and software developers. All of these attributes help answer the question “What is JSON?” and give an idea of what JSON is used for – how it eventually became an indispensable tool for developers using different kinds of programming languages.
JavaScript Object Notation is Born
Everything described above made up the beginnings of JSON, or JavaScript Object Notation. The format was soon popularized as it offered a clear advantage to previous ways of updating and reloading a site.
So, what is JSON, or JavaScript Object Notation? Well, JSON was based on JavaScript’s scripting language, specifically the subset Standard ECMA-262 3rd Edition of December 1999, and knowledge of JavaScript is essential as it is often used together with JSON. However, this is not saying that JSON is a language in itself. It is a data format that is language-independent and language-agnostic.
The language-independent data format allows the code for parsing and generating JSON data to be written in many programming languages. The JSON libraries are listed according to language on the official JSON site.
In terms of usability, the JSON license contains a simple clause, added by Douglas Crockford himself, stating “The Software shall be used for Good, not Evil”.
What is JSON? A Simple Definition
In its simplest definition, JSON – or JavaScript Object Notation – is a way to store and transmit structured data in a simplified and text-based fashion. Its syntax is deliberately made simple so that it allows you to store a variety of data in varying degrees of simplicity or complexity (whichever perspective you approach it). The extension “.json” is used in its filenames. With JSON, you can store single numbers, strings, arrays, and objects. How does JSON do this? It can accomplish this method of storage with a simple string of plain text.
JSON also allows nesting of objects and arrays. This gives you the capability to build more complex data structures. When a JSON string is created, it makes it easier to send data to an application or computer. Plain text makes the whole thing simple to execute.
The principle is based on a manner of defining objects and arrays. Objects in JSON have a high level of similarity and are analogous to hashes or associated arrays that are used in other programming languages.
Types of Data Used in JavaScript Object Notation
Part of understanding “What is JSON?” is to grasp the types of values or data that can be included in this format. They are as follows:
- Numbers
- Strings
- Nulls
- Objects
- Booleans
- Arrays
First, you have numbers. These include real numbers, integers, and floating numbers. The second category is strings. Strings are a sequence of any text or Unicode characters that have delimitations in the form of double-quotation marks and support backslash escapement. The third category is nulls. Nulls simply denote that the associated variable has no value. The fourth category is objects. Objects are collections of key-value pairs, otherwise known as name-value pairs or attribute-value pairs. They are used to represent associative arrays and are separated by commas and enclosed in curly brackets. The fifth category is Booleans. Boolean data represents true or false values. The sixth category is arrays. Arrays are ordered sequences of values that are separated.
What JSON is Used For
To understand what JSON is used for, first, you have to look at the advantages that it confers any web project.
Pluses of using JSON or JavaScript Object Notation:
- Easy mapping into data structures that are utilized by popular programming languages, such as numbers, nulls, strings, arrays, booleans, and associative arrays
- Almost all programming languages have libraries or functions that can read and write structures of JSON
- Simple and compact
- It was made to be user-friendly for both people and computers
- It’s flexible
Specifics of what JSON is Used For
JSON, or JavaScript Object Notation, can be used with a multitude of modern programming languages in several different ways. While going into each language is beyond the scope of this article, know that if you search “What is JSON” you will be directed to many applications in different languages.
- Data Transfers. JSON helps you move server data. It also allows you to transmit data between servers and web applications.
- Serializing Data. JSON is a convenient way to serialize structured data and its transmission. The file format simplifies the process.
- Omitting the Need for Page Refresh. With JSON, you don’t need to refresh a web page constantly. You can perform asynchronous data calls, thus making the process of data retrieval more efficient.
- The JSON format is used for the retrieval of public data by restful APIs and web services
- JavaScript-related applications
JSON and JavaScript Applications
If you use JavaScript or are interested in learning JavaScript, you’ll be happy to know that JSON is widely used in JavaScript applications. Website and browser extensions are part of such applications. It is also used for writing JS-based applications that involve browser add-ons.
As JSON in itself, though not a programming language, is based on a subset of JavaScript’s scripting language, it would be helpful for you to understand JavaScript better on the way to mastering the use of JSON. JSON’s syntax is based on the object notation from JavaScript, so you’ll find that you won’t be needing much extra software if you intend to work with JSON within JS. If you want to stay at the forefront of web development, you’ll already know that Web3 is the next big thing. However, traditional Web3 development can seem prohibitively difficult. This is where Moralis comes in.
Moralis is a fully managed, infinitely scalable Web3 backend infrastructure. As such, you do not need to reinvent the wheel when creating dApps or Web3 apps. Instead, Moralis allows developers to focus on the frontend side of things. Consequently, developers do not need to waste time setting up, managing and maintaining their own Web3 backends. Instead, Moralis handles all the heavy lifting. This allows you to create dApps and Web3 apps in hours and minutes, rather than months and weeks. What’s more, Moralis features full support for JSON, along with many other innovative technologies – such as Moralis Speedy Nodes, the Moralis Deep Index API, the Moralis NFT API, and much, much more.
Understand What JSON is by Learning JavaScript
Did you know that JSON can be easily translated to JS? If you are new to web development or wish to enhance your skills further, you can look up Ivan on Tech Academy’s amazing, beginner-friendly JavaScript course.
You can learn HTML and JavaScript all in one, and proceed to understand how it is used in the hottest trends right now like blockchain development. Another benefit to learning JavaScript is that you can move onto learning Solidity, which also bases its syntax on JS. The languages are very similar.
How to Format a JSON File
To understand JSON formatting, you need to understand its basic syntax and features. While we can’t cover the entire scope of how to format a JSON file as well as its use within different programming languages, we can get started on understanding the rules behind JSON’s syntax.
Syntax Rules of JSON:
- All data should come in name/value pairs
- All of the data has to be separated by commas
- The array type of data should be held by square brackets
- The object-type data should be held by curly braces
In JSON, whitespace is allowed. Whitespace is defined plainly as that space that is ignored in between the elements of the syntax. The characters or keyboard elements that are considered whitespace are carriage returns, line feeds, horizontal tabs, and spaces.
Comments have been excluded from the JSON format. They were excluded from the design by Crockford himself for better interoperability, avoiding the possibility of people using them to hold parsing directives.
Writing JSON Strings
With an idea of JSON’s syntax rules, you can proceed to learn how to write JSON strings. You can practice this and view further details and examples on the JSON website.
How to Format a JSON File With Notepad++
Notepad++ is a relatively common programmer text editor for Windows. Given its accessibility, it should be a convenient tool for formatting JSON.
JSON is supposedly a human-readable format but more often than not, it just comes as a long string, without spaces or a wall of text that is hardly human-friendly at all. So with that in mind, there are tools that make it easier for us to read it and guide us on how to format a JSON file.
When JSON is minified, or stripped of spaces and line breaks, for faster network transfer, it becomes impossible for humans to easily read.
You can try the JSONViewer plugin for Notepad++ to fix this problem. As Notepad++ is free and open-source with many great plugins to choose from, it’s a relatively popular choice.
Get the Plugin on Notepad++
Go on the plugins menu and click Show Plugin Manager. A dialog box allows you to search the plugins. To find what you’re looking for simply search JSON. Just find the plugin JSONViewer and hit install. This is your first simple step in learning how to format a JSON file.
Bear in mind that with JSONViewer you need to select the entire JSON text before you proceed to formatting. This is a really important step. Nothing will happen if you don’t select the text.
How to Format a JSON File Using JSONViewer
After selecting, you go to JSONViewer, then click Format JSON. Instantly, you should see your JSON nicely displayed on screen in an easy-to-read formatted version. JSON Viewer also has a tree view of the file.
How to Format a JSON File Using JSTool
Another plugin option you can use is JSTool. JSTool has the added feature of allowing you to fold the JSON. If you are wondering which Notebook++ plugin best assists you on how to format a JSON file, this could be it.
The folding feature makes it easier for you to fold the text or hide it, so you don’t have to view the whole thing. JSTool also has the advantage of not having to let you do the selection before formatting. It does the selection automatically. JSTool has a minifier option, which JSONViewer does not have. The minifier brings it back to its compressed form without spaces.
How to Format a JSON File using Other Web-based Tools
Now that you’re already familiar with how to format a JSON file using Notepad++, you can explore other options. Numerous websites help you do that. Outside of Notepad++, there are other formatters that allow you to format JSON data to make it easier to read during a debugging process and can work with a variety of programming languages. Several free web-based tools can help you edit, view, and show you how to format a JSON file outside of the ones used in our tutorial. There are also open-source projects that can be used as annotators, validators, and reformatters of JSON.
Why Learn JavaScript Open Notation?
Ultimately, JavaScript Open Notation was intended to simplify and lighten the process of data transfer in order to build speed lanes between man and machine—or man and code, browser and server. Its sparse yet systematic way of organizing data has led to many benefits in user experience and on the creator or manufacturer side, to ship products faster. Learning and understanding JSON, and being able to format it while working with various programming languages is a skill that will optimize any development endeavor and will lead to exponential advantages down the road.
When you use Moralis, you do not need to learn all the specifics of JavaScript Open Notation. However, if you’ve appreciated this article, be sure to check out our other more technical deep-dives on the Moralis blog. The Moralis blog is updated on a daily basis with completely free, in-depth articles such as “What is Hardhat?”, “What is IPFS?”, “MetaMask Explained”, “What are Geth Nodes?” and much more!
