Introduction
JSON, short for JavaScript Object Notation, is a format for sharing data. As the name suggests, JSON is derived from the JavaScript programming language, but is available for many languages, including Python, Ruby, PHP, and Java. JSON is often pronounced like the name “Jason.”.
JSON is also readable, lightweight, provides a good alternative to XML, and requires much less formatting. This informative guide discusses the data you can use in JSON files and the general structure and syntax of the format.
Understanding syntax and structure
JSON uses the extension .json when it stands alone, and when defined in another file format (such as .html), it can appear as a JSON string within quotes, or it can be an object assigned to a variable. This format is transmitted between a web server and a client or browser.
A JSON object is a key-value data format, usually enclosed in curly braces. When working with JSON, you'll likely encounter JSON objects in a .json file, but they can also exist as a JSON object or string within the context of a program.
Here is an example of a JSON object:
{
"first_name" : "Sammy",
"last_name" : "Shark",
"location" : "Ocean",
"online" : true,
"followers" : 987
}Although this is a short example, and JSON can be many lines long, it shows that the format is generally set up with two parentheses (or curly brackets) represented by {} on either side of it, followed by the key-value pair. The pairs fill the space between. Most of the data used in JSON is encapsulated in a JSON object.
Key-value pairs are separated by a colon, such as “key”: “value”. Each key-value pair is separated by a comma, so the middle of a JSON is listed as follows: “key” : “value”, “key”: “value”, “key”: “value”. In the previous example, the first key-value pair is “first_name”: “Sammy”.
JSON keys are on the left side of the colon. They must be wrapped in double quotes like "key" and can be any valid string. Within each object, keys must be unique. These key strings can contain spaces like "first_name", but this can make it harder to access when programming, so it's better to use underscores like "first_name".
JSON values are found to the right of the colon. At a granular level, these must be one of the following six data types:
- strings
- numbers
- objects
- arrays
- Booleans (true or false)
- null
At a broader level, values can also be constructed from complex JSON object or array data types, which will be discussed in the next section.
Each of the data types passed as values to JSON maintains its own syntax, meaning strings are enclosed in quotes, but numbers are not.
With .json files, you usually get a template that is spread across multiple lines, but JSON can also be written all on one line, like in the following example:
{ "first_name" : "Sammy", "last_name": "Shark", "online" : true, }This is more common in another file type or when you encounter a JSON string.
Writing JSON across multiple lines often makes it much more readable, especially when you're dealing with a large data set. Since JSON ignores whitespace between its elements, you can separate your key-value pairs with colons to make the data even more human-readable:
{
"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}It is important to remember that although a JSON object looks similar, a JSON object is not the same format as a JavaScript object, so although you can use functions in JavaScript objects, you cannot use them as values in JSON. The most important feature of JSON is that it can be easily transferred between programming languages in a format that all participating languages can work with. In contrast, JavaScript objects can only be worked with directly through the JavaScript programming language.
JSON can be made more complex with hierarchies made up of nested objects and arrays. You'll learn more about these complex structures in the next step.
Working with complex types in JSON
In addition to nested arrays, JSON can store nested objects in JSON format. These objects and arrays are sent as values assigned to keys and may also consist of key-value pairs.
Nested objects
In the following users.json file, for each of the four users (“sammy”, “jesse”, “drew”, “jamie”) a nested JSON object is passed as the value for each of them, with its own nested “username” and “location” keys that correspond to each of the users. Each user entry in the following code block is an example of a nested JSON object:
{
"sammy" : {
"username" : "SammyShark",
"location" : "Indian Ocean",
"online" : true,
"followers" : 987
},
"jesse" : {
"username" : "JesseOctopus",
"location" : "Pacific Ocean",
"online" : false,
"followers" : 432
},
"drew" : {
"username" : "DrewSquid",
"location" : "Atlantic Ocean",
"online" : false,
"followers" : 321
},
"jamie" : {
"username" : "JamieMantisShrimp",
"location" : "Pacific Ocean",
"online" : true,
"followers" : 654
}
}In this example, curly braces are used to form a nested JSON object with the username and associated location data for each of the four users. As with any other value, when using objects, commas are used to separate the elements.
Nested arrays
You can also nest data in JSON using JavaScript arrays, which are passed as values. JavaScript uses brackets [ ] at both ends of its array type. Arrays are ordered collections and can contain values of different data types.
For example, you might use an array when dealing with a lot of data that can be grouped together, such as when there are different websites and social media profiles associated with a single user.
With the first nested array, a user profile for “Sammy” might look like this:
{
"first_name" : "Sammy",
"last_name" : "Shark",
"location" : "Ocean",
"websites" : [
{
"description" : "work",
"URL" : "https://www.digitalocean.com/"
},
{
"desciption" : "tutorials",
"URL" : "https://www.digitalocean.com/community/tutorials"
}
],
"social_media" : [
{
"description" : "twitter",
"link" : "https://twitter.com/digitalocean"
},
{
"description" : "facebook",
"link" : "https://www.facebook.com/DigitalOceanCloudHosting"
},
{
"description" : "github",
"link" : "https://github.com/digitalocean"
}
]
}The “websites” and “social_media” keys each use an array to hold information about Sammy’s two website links and three social media profile links. You can tell that these are arrays because of the use of square brackets.
Using nesting in JSON format allows you to work with more complex and hierarchical data.
Comparing JSON to XML
XML, or Extensible Markup Language, is a way to store accessible data that is both human and machine-readable. The XML format is available for use in many programming languages.
In many ways, XML is similar to JSON, but it requires much more text, and it is longer and more time-consuming to read and write. XML also needs to be parsed with an XML parser, but JSON can be parsed with a standard function. Also, unlike JSON, XML cannot use arrays.
Here is an example of the XML format:
<users>
<user>
<username>SammyShark</username> <location>Indian Ocean</location>
</user>
<user>
<username>JesseOctopus</username> <location>Pacific Ocean</location>
</user>
<user>
<username>DrewSquir</username> <location>Atlantic Ocean</location>
</user>
<user>
<username>JamieMantisShrimp</username> <location>Pacific Ocean</location>
</user>
</users>Now, compare the same data presented in JSON:
{"users": [
{"username" : "SammyShark", "location" : "Indian Ocean"},
{"username" : "JesseOctopus", "location" : "Pacific Ocean"},
{"username" : "DrewSquid", "location" : "Atlantic Ocean"},
{"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"}
] }JSON is much more compact and does not require closing tags, whereas XML does. Furthermore, XML does not use arrays like this JSON example (which you can tell by the use of brackets).
If you are familiar with HTML, you will notice that XML is quite similar in its use of tags. While JSON is thinner and more verbose than XML and is faster to use in many situations, including AJAX applications, you will first want to know the type of project you are working on before deciding on which data structures to use.
Result
JSON is a lightweight format that allows you to share, store, and work with data. As a format, JSON has seen increasing support in APIs, including the Twitter API. JSON is also a natural format for use in JavaScript and has many implementations for use in various popular programming languages. You can read the full language support on the "Introducing JSON" site.
Since you probably won't be creating your own .json files, but rather getting them from other sources, it's important to think less about the JSON structure and more about how to best use JSON in your applications. For example, using the open-source tool Mr. Data Converter, you can convert CSV or tab-delimited data that you might find in spreadsheet applications to JSON. You can also convert XML to JSON and vice versa using the Creative Commons-licensed site Utilities-online.info.
Finally, when translating other data types to JSON, or creating your own type, you can validate your JSON with JSONLint and test your JSON in the context of web development with JSFiddle.
