Learn JSON: Get Started with Portable Data Transportation

JSON, short for JavaScript Object Notation, was initially conceived as a way to transport JavaScript objects between a browser and web server. However, today the name is a bit of a misnomer since JSON can be used as a data transportation format with virtually any popular programming language.

JSON has become the default choice for formatting data for use in interactive web applications. It has a very lightweight syntax and is very easy to learn, read, and write.

History of JSON

JSON wasn’t invented, it was “discovered.” While he wasn’t the first to use JSON, Douglas Crockford is typically credited with discovering the format because he was the first to popularize and specify its use around the year 2001. However, in a presentation to Yahoo! Developers, Crockford reveals that he discovered that JSON was in use at Netscape as early as 1996.

Prior to its discovery, JSON existed as an unintentional byproduct of existing browser capabilities. Crockford, a cofounder of software company State Software, was developing an AJAX web application framework. However, State Software needed to find a way to enable real-time two-way browser-to-server communication without relying on Flash plugins or Java applets. It was this need that served as the impetus behind the discovery of JSON.

Originally, Crockford thought of JSON as part of the JavaScript language and named it accordingly. However, since JSON consists of nothing more than commas, curly braces, square brackets, and data, it can be easily parsed into an array or object by any programming language. Because of it’s language independence, JSON was established as a standalone ECMA standard in 2013 (ECMA-404) and then extended and referenced by Internet Engineering Task Force (IETF) Request For Comment (RFC) 7159 one year later.

How is JSON Used Today

JSON is the default choice for transporting data on the internet. It has surpassed formats like XML and CSV due to its simplicity and language-independence. Modern JSON implementation generally falls into one of two categories:

• Web service APIs use JSON format to make data available to third-party applications.
• AJAX interactions often use JSON to shuttle data between a server and a visitor’s browser.

In both cases, client-side manipulation of JSON with JavaScript will be necessary to render the data. In addition, if the data is going to be used to perform any action on a web server, then a server-side programming language and language-specific JSON library will do the work on the server.

JSON Data Structures

JSON data is formatted into two data structures that are used universally in all modern programming languages:

• A JSON array is a list of values.
• A JSON object is a collection of name-value pairs.

That may seem straightforward enough, but things get a bit more complex when you consider that the values in arrays and objects can contain numbers, booleans, strings, null values, or even nested arrays and objects. Names, on the other hand, can only be strings.

JSON Data Examples

Definitions are useful, but what’s even more useful is to see some JSON data. Let’s take a look at a simple array.

[ "red", "green", "blue", 7 ]

That array contains four values: three strings and a number. Let’s take things up a notch with a simple object.

{
  "event": "breakfast",
  "location": "Tiffany's",
  "remember": true,
  "format": "film",
  "bothKindaLikedIt": true,
  "thingsInCommon": 1
}

Ok, now things are getting a little more interesting. In this object, we have six name-value pairs. Each name is a string and the values consist of three strings, two boolean values, and one number.

We have time for one more example. In this case, a more complex object with nested arrays and objects.

{
 "contentManagementSystems" : [
  {
  "name": "WordPress",
  "percentMarketShare": 58.9
  },
  {
  "name": "Joomla",
  "percentMarketShare": 6.1
  },
  {
  "name": "Drupal",
  "percentMarketShare": 4.9
  }
 ]
}

We started things out with a single name-value pair using the name "contentManagementSystems". The value is a somewhat complex array (we know that because of the square brackets) that contains the rest of the data in the object. However, rather than holding simple values, each value in the array is a nested name-value pair (also known as an object and identified as such by the curly braces).

In other words, this is a JSON object that contains an array of objects. Got it? Good.

Resources

So now you know what JSON is, but maybe you want to learn how to actually use JSON. If so, you’re in luck. Here are some of the finest JSON resources the web has to offer:

• The Mozilla Developer Network JSON documentation is a complete overview of JSON syntax and client-side JSON interaction.
• W3Schools offers a basic JSON introduction that demonstrates JSON syntax and compares XML to JSON.
• What is JSON: The 3 Minute JSON Tutorial, by the Secret Geek (AKA, the not-so-secret Leon Bambrick), is a short crash-course in JSON syntax, use, and its similarity to XML.
• JSON.org is the official JSON website which includes an extensive list of JSON implementations organized by programming language.

JSON and Your Favorite Language

As we’ve mentioned more than once, JSON data can be used with virtually any programming language. We’ve located a few tutorials that will help you get started using JSON for web development with Java, PHP, or the .NET framework.

• Learn to use JSON with Java by reading Java API for JSON Processing: An Introduction to JSON from the Oracle Technology Network.
• The Java JSON Tutorial from Jenkov.com covers three popular Java JSON parsers and links to another tutorial by the same author that will teach you how to build your own JSON parser.
• Use JSON with PHP by referring to the JSON section of the PHP Manual. As of PHP 5.2, JSON has been bundled in the PHP core. As a result, using JSON with a PHP application is as simple as familiarizing yourself with the various JSON functions built into the language.
• If you want to master the use of JSON in PHP take a look at Handling JSON Like a Boss in PHP: an in-depth tutorial that tackles advanced techniques.
• Apply JSON to the .NET framework by referring to An Introduction to JavaScript Object Notation (JSON) in JavaScript and .NET from the Microsoft Developer Network.

Books

If you prefer your education to printed and bound form, here are three of the best JSON texts money can buy:

• Introduction to JavaScript Object Notation: A To-the-Point Guide to JSON (2015) by Lindsay Bassett is a concise guide to JSON implementation that covers Web APIs, server-side language libraries, and client-side JSON manipulation.
• JSON at Work (2016) by Tom Marrs will show you how to work with JSON using JavaScript, jQuery, HTML5, Ruby, and Java.
• Beginning JSON (2015) by Ben Smith says that it covers “beginning” JSON, but the truth is that this text covers a lot more than the basics.

Summary

JSON is a concise, language-independent format for transmitting data between web servers and browsers. It’s the data transportation format of choice for modern AJAX-powered interactive web apps and web service APIs. Thankfully, JSON is also easy to get started with and will almost certainly work just fine within your favorite web development environment.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

• XML Resources: once thought to be the replacement for HTML, it is still a very popular data storage and transfer language.
• PHP Introduction and Resources: the most popular server-side programming language in the world — and for a reason.
• ASP.NET Resources: this guide will get you going with Microsoft’s .NET framework for creating webpages.

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, “How much money will I make programming Java for a living?”

What Code Should You Learn?