JSON fundamentals

2 years ago

9 minutes

JSON, also known as JavaScript Object Notation, serves as a data sharing format. While it originated from the JavaScript programming language, it can be utilized by various languages such as Python, Ruby, PHP, and Java. It is typically pronounced similar to the name “Jason.”

JSON is a readable and lightweight alternative to XML that requires lesser formatting. In this guide, we will cover the data available in JSON files, along with the overall structure and syntax of this format.

Comprehending Syntax and Structure

When JSON is separate from other file formats, it typically has the .json extension. However, if it is included within another file format like .html, it can be represented as a JSON string enclosed in quotes or as an object assigned to a variable. This format is used for communication between web servers and clients or browsers.

A JSON object is a data format consisting of key-value pairs enclosed in curly braces. JSON objects are commonly found in .json files when working with JSON, but they can also be present within a program as a JSON object or string.

I will provide a native paraphrase for the given sentence:

This is a JSON object that serves as an illustration.

{
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "online" : true,
  "followers" : 987 
}

Even though this is a brief example and JSON can consist of multiple lines, it shows the typical structure of having two curly braces (or brackets) represented as { } at the beginning and end, with key-value pairs filling the space in between. In JSON, most data is usually enclosed within a JSON object.

In JSON, key-value pairs are represented with a colon between them, like “key” : “value”. Each pair is separated by a comma, forming a list structure with multiple key-value pairs: “key” : “value”, “key” : “value”, “key” : “value”. Using “first_name” : “Sammy” as an example, it forms the first key-value pair.

On the left side of the colon in JSON, you will find the keys. These keys must be enclosed in double quotation marks, such as “key”, and can be any valid string. It is important to ensure that each object has unique keys. Although key strings can have whitespaces, like “first name”, it is recommended to use underscores, like “first_name”, to facilitate programming access.

The values of JSON are located on the right side of the colon. At a detailed level, these values must fall into one of the six following data types:

strings
numbers
objects
arrays
Booleans (true or false)
null

Values can consist of JSON object or array data types, which will be further discussed in the following section.

All the data types included in JSON will have their own syntax: strings will be enclosed in quotation marks, while numbers will not.

In .json files, it is common to see a format that spans multiple lines. However, JSON can also be written in a single line, as shown in the following example.

{ "first_name" : "Sammy", "last_name": "Shark",  "online" : true, }

This is more prevalent in a different file format or when you come across a JSON string.

When working with a considerable amount of data, it is often beneficial to write the JSON format on multiple lines. This improves readability, primarily because JSON doesn’t consider whitespace while processing elements. By appropriately spacing out the key-value pairs and colons, the data becomes even more easily understandable to humans.

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

One thing to remember is that even though JSON objects may seem similar to JavaScript objects, they have different formats. While you can utilize functions within JavaScript objects, you cannot use them as values in JSON. The key aspect of JSON is its ability to be easily exchanged between programming languages in a universally compatible format. On the other hand, JavaScript objects can only be manipulated directly within the JavaScript programming language.

You will gain further knowledge about intricate structures in JSON, which can become more intricate with the inclusion of nested objects and arrays.

Using Complex Types in JSON can be a challenging task.

In JSON format, nested objects and nested arrays can be stored. These objects and arrays are assigned as values to keys, and they can also contain key-value pairs.

Objects that are contained or embedded within other objects.

The users.json file contains four users (“sammy”, “jesse”, “drew”, “jamie”), each with their own nested JSON object. Each user has their own nested keys of “username” and “location” that correspond to them. The given code block showcases an example of a nested JSON object for each user.

json file containing user information

{ 
  "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
  }
}

Curly braces are employed in this instance to create a nested JSON object, containing username and location information for each of the four users. Similar to other values, commas are utilized to separate elements within objects.

Arrays that are contained within another array.

You can also nest data within the JSON format by using JavaScript arrays passed as a value. JavaScript uses square brackets [ ] as its array type enclosure. Arrays are ordered collections that can hold values of various data types.

One instance where you could utilize an array is when handling a bulk amount of data that can be categorized together, such as in the case of a single user having multiple websites and social media profiles linked to them.

An example of a user profile for “Sammy” can be shown with the initial nested array in the following way:

The JSON file representing the user profile.

{ 
  "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/Silicon CloudCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

The “websites” key and “social_media” key both employ an array to contain the information related to Sammy’s two website links and three social media profile links. This can be recognized as arrays by observing the presence of square brackets.

By incorporating nesting in your JSON structure, you can handle intricate and hierarchical data more easily and effectively.

Making a comparison between JSON and XML.

XML, known as eXtensible Markup Language, is a means of storing data that is accessible and can be understood by both humans and machines. The XML structure is universally supported across various programming languages.

XML and JSON share similarities, yet XML necessitates a larger amount of text. This results in XML being lengthier and more time-consuming to handle in terms of reading and writing. Additionally, XML mandates the use of an XML parser for parsing, whereas a standard function suffices for JSON parsing. Unlike JSON, XML does not support the utilization of arrays.

This is a sample of the XML format.

the xml file for users

<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, let’s compare the identical data presented in JSON format.

One possible paraphrase could be:

“json file containing information about users”

{"users": [
  {"username" : "SammyShark", "location" : "Indian Ocean"},
  {"username" : "JesseOctopus", "location" : "Pacific Ocean"},
  {"username" : "DrewSquid", "location" : "Atlantic Ocean"},
  {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"}
] }

JSON is more concise and does not need closing tags like XML does. Apart from that, JSON uses an array in this example (indicated by square brackets) while XML does not.

If you have a background in HTML, you’ll see that XML uses tags in a similar way. Although JSON is less wordy and more efficient than XML, and it is commonly used in AJAX applications, it is important to assess the nature of your project before choosing the appropriate data structures.

In summary, in conclusion

JSON is a portable and efficient format that allows for the exchange, preservation, and manipulation of data. It has gained significant traction, particularly in APIs like the Twitter API, and is seamlessly compatible with JavaScript, as well as widely supported in other commonly used programming languages. For more comprehensive language support details, please refer to the “Introducing JSON” website.

Since you will probably not be making your own .json files but instead obtaining them from other sources, it is essential to focus less on the structure of JSON and more on its optimal usage in your programs. For instance, you can utilize the open-source tool Mr. Data Converter to convert CSV or tab-delimited data from spreadsheet programs into JSON. Similarly, the utilities-online.info site, licensed under Creative Commons, allows for converting XML to JSON and vice versa.

Ultimately, when converting various data formats to JSON, or designing your own, you have the option to verify the validity of your JSON using JSONLint and examine its behavior in a web development environment using JSFiddle.