JSON, or JavaScript Object Notation, is a format used to represent data. It was introduced in the early 2000s as part of JavaScript and gradually expanded to become the most common medium for describing and exchanging textual data. Today, JSON is the universal standard for data exchange. It is found in all areas of programming, including front-end and server-side development, systems, middleware, and databases.
This article introduces you to JSON. You’ll get an overview of the technology, learn how it compares to similar standards like XML, YAML, and CSV, and see examples of JSON in a variety of programs and use cases.
A little history
JSON was originally developed as a communication format between JavaScript clients and backend servers. It quickly gained popularity as a human-readable format that front-end programmers could use to communicate with the back-end using a concise, standardized format. The developers also discovered that JSON was very flexible: you could add, delete, and update fields ad hoc. (This flexibility came at the expense of security, which was later solved with the JSON schema.)
In a curious twist, JSON was popularized by the AJAX revolution. Strange, given the focus on XML, but it was JSON that really made AJAX shine. Using REST as a convention for APIs and JSON as a medium of exchange has proven to be a powerful combination for balancing simplicity, flexibility, and consistency.
Then JSON spread from front-end JavaScript to client-server communication, and from there to system configuration files, core languages, and even databases. JSON even helped boost the NoSQL movement that revolutionized data storage. It turned out that database administrators also liked JSON’s flexibility and ease of programming.
Today, document-oriented data stores like MongoDB provide an API that works with JSON-like data structures. In an interview in early 2022, MongoDB CTO Mark Porter noted that, from his perspective, JSON always pushes the data frontier. Not bad for a data format that started with a humble brace and colon.
Why developers use JSON
Regardless of the type of program or use case they’re working on, software developers need a way to describe and exchange data. This need is found in databases, business logic, user interfaces, and in all system communications. There are many approaches to structure the data to be exchanged. The two big camps are binary and textual data. JSON is a text-based format, so it is readable by both people and machines.
JSON is an extremely efficient way to format data for several reasons. First, it is native to JavaScript and is used in JavaScript programs as JSON literals. You can also use JSON with other programming languages, so it’s useful for exchanging data between heterogeneous systems. Finally, it is human readable. For a language data structure, JSON is an incredibly versatile tool. It is also quite painless to use, especially compared to other formats.
How JSON Works
When you enter your username and password into a form on a web page, you are interacting with a two-field object: username and password. As an example, consider the login page in Figure 1.
IDGFigure 1. A simple login page.
Listing 1 shows this page described using JSON.
Listing 1. JSON for a login page
{
username: “Bilbo Baggins”,
password: “fkj3442jv9dwwf”
}
Everything inside braces or wavy brackets ( {…} ) belongs to the same object. A objectin this case, refers in the most general sense to a “single thing”. Inside the braces are the properties that belong to the thing. Each property has two parts: a name and a value, separated by a colon. These are known as keys and values. In Listing 1, “username” is a key and “Bilbo Baggins” is a value.
The key takeaway here is that JSON does everything necessary to handle the need – in this case, keeping the information in the form – without a lot of extra information. You can take a look at this JSON file and understand it. This is why we say JSON is concise. The brevity also makes JSON a great format for sending over the network.
JSON versus XML
JSON was created as an alternative to XML, which was once the dominant format for data interchange. The login form in Listing 2 is described in XML.
Listing 2. XML login form
<UserLogin>
<Username>Samwise Gamgee</Username>
<Password>ghB5fK5</Password>
</UserLogin>
Ouch! Just looking at this form is tiring. Imagine having to create and parse it in code. On the other hand, using JSON in JavaScript is extremely easy. Try it. Press F12 in your browser to open a JavaScript console, then paste the JSON shown in Listing 3.
Listing 3. Using JSON in JavaScript
let hobbitJson = {
name: "Pippin",
hometown: "Shire"
}
console.log(hobbitJson.name); // outputs “Pippin”
hobbitJson.bestFriend = "Merry"; // modify the object
console.log(JSON.stringify(hobbitJson)); //output entire object
// {"name":"Pippin","hometown":"Shire","bestFriend":"Merry"}
XML is hard to read and leaves a lot to be desired in terms of coding agility. JSON was created to solve these problems. No wonder it has more or less supplanted XML.
JSON vs. YAML and CSV
Two data formats sometimes compared to JSON are YAML and CSV. The two formats are at opposite ends of the time spectrum. CSV is an old pre-digital format that finally found its way into computers. YAML was inspired by JSON and is sort of its conceptual descendant.
CSV is a simple list of values, each entry denoted by a comma or other separator character, with an optional first line of header fields. It is rather limited as a means of exchange and a programming structure, but it is still useful for outputting large amounts of data to disk. And, of course, CSV’s tabular data organization is perfect for things like spreadsheets.
YAML is actually a superset of JSON, which means it will support anything JSON supports. But YAML also supports a more simplified syntax, intended to be even more concise than JSON. For example, YAML uses indentation for hierarchy, forgoing braces. Although YML is sometimes used as a data interchange format, its biggest use case is for configuration files.
Complex JSON: Nesting, Objects, and Arrays
So far, you’ve only seen examples of JSON used with superficial (or simple) objects. It simply means that each field of the object contains the value of a primitive. JSON is also capable of modeling arbitrary complex data structures such as object graphs and cyclic graphs, i.e. structures with circular references. In this section, you’ll see examples of complex modeling through nesting, object references, and arrays.
JSON with nested objects
Listing 4 shows how to define nested JSON objects.
Listing 4. Nested JSON
let merry = { name: "Merry",
bestfriend: {
name: "Pippin"
}
}
The bestfriend The property in Listing 4 refers to another object, which is defined inline as a JSON literal.
JSON with object references
Now consider Listing 5, where instead of holding a name in the bestfriend property, we hold a reference to the actual object.
Listing 5. An object reference
let merry = { race: "hobbit", name: “Merry Brandybuck” }
let pippin = {race: "hobbit", name: “Pippin Took”, bestfriend: merry }
console.log(JSON.stringify(pippin.bestfriend.name)); // outputs “Merry Brandybuck”
In Listing 5, we put the handle at the merry object on the bestfriend property. Then we are able to get the actual value merry object out of pippin object through the bestfriend property. We got the name of merry object with the name property. It’s called traversing the graph of objectswhich is done using the dot operator.
JSON with arrays
Arrays are another type of structure that JSON properties can have. These look like JavaScript arrays and are indicated by a square bracket, as shown in Listing 6.
Listing 6. An array property
{
towns: [ “The Shire”, “Rivendale”, “Gondor” ]
}
Of course, arrays can also contain references to other objects. With these two structures, JSON can model any range of complex object relationships.
Parsing and generating JSON
Parsing and generating JSON means reading and creating it, respectively. You saw JSON.stringify() already in action. It’s the built-in mechanism for JavaScript programs to take an object representation in memory and turn it into a JSON string. To go the other way, i.e. take a JSON string and turn it into an in-memory object, you use JSON.parse().
In most other languages, it is necessary to use a third-party library for parsing and generation. For example, in Java there is many librariesbut the most popular are jackson and GSON. These libraries are more complex than stringify and parse in JavaScript, but they also offer advanced features such as mapping to and from custom types and processing other data formats.
In JavaScript, it is common to send and receive JSON to servers. For example with the fetch() APIs. By doing so, you can automatically parse the response, as shown in Listing 7.
Listing 7. Parsing a JSON response with fetch()
fetch('https://the-one-api.dev/v2/character')
.then((response) => response.json())
.then((data) => console.log(data));
Once you’ve transformed JSON into an in-memory data structure, whether it’s JavaScript or another language, you can use the APIs to manipulate the structure. For example, in JavaScript, the parsed JSON in Listing 7 would be accessible like any other JavaScript object, perhaps by looping data.keys or access known properties on the data object.
JSON schema and JSON formatter
JavaScript and JSON are incredibly flexible, but sometimes you need more structure than they provide. In a language like Java, strong typing and abstract types (like interfaces) help structure large-scale programs. In SQL stores, a schema provides a similar structure. If you need more structure in your JSON documents, you can use JSON Schema to explicitly define the characteristics of your JSON objects. Once defined, you can use the schema to validate object instances and ensure that they conform to the schema.
Another issue is machine-processed JSON which is minified and unreadable. Fortunately, this problem is easy to fix. Just jump to the JSON formatter and validator (I like this tool but there are others), paste your JSON and press the Treat button. You will see a human-readable version that you can use. Most IDEs also have a built-in JavaScript formatter to format your JSON.
Using JSON with TypeScript
TypeScript allows defining types and interfaces, so sometimes you use JSON with Manuscript Is usefull. A class, like a schema, describes the acceptable properties of an instance of a given type. In plain JavaScript, there is no way to restrict properties and their types. JavaScript classes are like suggestions; the programmer can define them now and modify the JSON later. A TypeScript class, however, enforces what properties JSON can have and what types they can be.
Conclusion
JSON is one of the most essential technologies used in the modern software landscape. It is crucial for JavaScript but also used as a common mode of interaction between a wide range of technologies. Fortunately, what makes JSON so useful is making it relatively easy to understand. It is a concise and readable format for representing textual data.
Copyright © 2022 IDG Communications, Inc.