JSON Tutorial For Beginners Step-By-Step

Introduction to JSON: A Complete JSON Tutorial Series for Beginners

JavaScript Object Notion, commonly known as JSON, is one of the most popular data transition formats. It is a text-based and lightweight format for data transactions. The JSON format was first computed by Douglas Crockford.

This being a text-based format is easier to read or write by the user and at the same time, its lightweight property makes it a stress-free alternative for machines to deconstruct or generate. It is basically a subset of the JavaScript but JSON, as a text format is totally independent of any of the programming languages used as almost all the languages, can easily analyze the text.

Its unique properties like text-based, lightweight, language independence etc. make it an ideal candidate for data-interchange operations.

LIST of JSON Tutorials in this series:

Tutorial #1: Introduction to JSON (This Tutorial)
Tutorial #2: Creating JSON Objects Using C#
Tutorial #3: Creating JSON Structure Using C#
Tutorial #4: Using JSON for Interface Testing
Tutorial #5: JSON Interview Questions

JSON Tutorial for Beginners

This tutorial gives you a complete overview of JSON, thereby briefing about its objects, properties, usage, and arrays with some examples for your easy and better understanding.

Usage of JSON

JSON is mostly used to transfer data from one system to another. It can transfer data between two computers, databases, programs etc.

• It is mainly used for transmitting serialized data over the network connection.
• It can be used with all the major programming languages.
• Useful in data transition from the web application to the server.
• Most web services use a JSON based format for data transfer.

Properties of JSON

Let’s summarize the properties:

• It is a text-based lightweight data interchange format.
• It has been extended from the JavaScript language.
• The extension is .json.
• Being a text-based format it is easy to read and write by both the user/programmer and the machines.
• This is independent of programming language but it also uses the conventions that are quite well known within the C-Family of languages like C, C++, C#, JavaScript, Java, Python, Perl etc.

So far, we have discussed JSON properties and usage. From here on, we will discuss the structure of JSON or JavaScript Object Notion.

JSON grew out of a need for a real-time server-to-browser communication procedure that can operate without using any extra plugins like java applets or flash. So, after realizing the need for a communication protocol that can be used in real-time, Douglas Crockford specified JSON in early 2000.

Earlier JSON was viewed as the subcategory of JavaScript and was vividly used with the same. But the code for serializing and parsing JSON is available in almost all the major languages.

Syntax of JSON

By now, you must have gained some basic knowledge about JSON. Let’s take a look at the basic syntax which is used in forming a JSON.

JSON can be basically classified by being built on two structural entities. They are a collection of name-value pairs and an ordered list of values.

JSON is a universal data structure as most of the programming languages available today support them. It makes the work of a programmer a lot easier to have an interchangeable data type that can work across different languages.

Learn more about these data types:

• The name value pair collection is realized as an object, strut, record, dictionary etc.
• The ordered value list is realized as an array, list etc.

We have seen almost all the basic theories until now. Let’s move on and have a look at the basic JSON structure. In this Example, we are considering a JSON representing the details of a Car.

Let’s assume we have a car object with the following basic properties and their attributes:

Make and Mode = Maruti Suzuki Swift
Make Year = 2017
Color = Red
Type = Hatchback

So, if we want to transfer this data using a JSON file, then the serialization of this data will create a JSON.

JSON will look something like this:

We have seen about the usage of JSON, its basic structure and how data is presented in the JSON format. Now, let’s take a closer look at how different elements are structured in JSON.

What is a JSON Object?

A JSON object is a set of Keys along with its values without any specific order.

The key and their values are grouped using curly braces, both opening and closing “{ }”. So, in the previous Example when we were creating a JSON with a car attribute, we were creating a JSON car Object. There are certain rules that need to be followed while creating a JSON structure, we will learn about those rules while discussing the Key value pairs.

So, in order to create a JSON, the first thing we will need is an attribute. Here, we are creating an “Employee” JSON object. The next thing we need is to specify the properties of the object. Let’s assume our employees have a “First Name”, “Last Name”, “employee ID” and “designation”. These properties of the employee are represented as “Keys” in the JSON structure.

Let’s create a JSON object:

Everything within the curly braces is known as the JSON Employee Object.

A basic JSON object is represented by a Key-Value pair. In the previous Example, we used JSON to represent employee data.

And we have represented different properties for the employee; “First Name”, “Last Name”, “employee ID” and “designation”. Each of these “keys” has a value in the JSON. For Example, “First Name” has been represented by a value “Sam”. Similarly, we also have represented other keys by using different values.

Generic Rules to be followed while creating a JSON:

• JSON Objects should start and end with braces “{ }”.
• Key fields are included in the double quotes.
• Values are represented by putting “:” colon between them and the keys.
• The JSON key-value pairs are separated by a comma “,”.
• Values can be of any data type like String, Integer, Boolean etc.

A small exercise for you.

Try to create a sample JSON describing an “Employee” with your own set of Keys and Values.

By now, you must have had a basic understanding of what JSON is. Usage of JSON and How it Looks? Now, let’s dive deeper into more complex JSON structures.

JSON Arrays

Arrays in JSON are similar to the ones that are present in any programming language, the array in JSON is also an ordered collection of data. The array starts with a left square bracket “[“and ends with a right square bracket “]”. The values inside the array are separated by a comma. Some basic rules need to be followed if you are going to use an array in a JSON.

Let’s have a look at a sample JSON with an Array. We will use the same Employee object that we used earlier. We will add another property like “Language expertise”. An employee can have expertise in multiple programming languages. In this case, we can use an array to offer a better way to record multiple language expertise values.

As we have already discussed, there are also a few rules that need to be followed, while including an array in a JSON.

They are:

• The array in JSON will start with a left square bracket and will end with a right square bracket.
• Values inside the array will be separated by a comma.

Objects, Key-value pairs, and Arrays make different components of the JSON. These can be used together to record any data in a JSON.

Now, as we have already discussed the basic structure of JSON, let’s start working on a more complex JSON structure.

Earlier in this tutorial, we gave you two Examples of JSON as shown below.

Employee JSON

Car JSON

Now, let’s assume that there is more than 1 employee and they also have a car. We will have to arrange the data in such a way that the car JSON should also be included in the Employee JSON to make the record a complete one. This means that we will have to create a nested Car JSON object inside the Employee JSON.

In order to include the car in the Employee JSON, initially, we need to include a Key as “car” in the JSON.

Something like this:

Once we have added the car key to the employee JSON, we can then pass the value directly to the Car JSON.

{
"FirstName": "Sam",
"LastName": “Jackson”,
"employeeID": 5698523,
"Designation" : "Manager",
“LanguageExpertise” : [“Java”, “C#”, “Python”]

“Car” : 
{
"Make&Model": "Maruti Suzuki Swift",
"MakeYear": 2017,
"Color": “Red”,
"Type”: "Hatchback",
}
}

This way, we can create a Nested JSON.

Let’s assume a situation where there are multiple employees, so we will have to create a JSON that can hold the data for several employees.

{
"FirstName": "Sam",
"LastName": "Jackson",
"employeeI-D": 5698523,
"Designation": "Manager",
"LanguageExpertise": ["Java", "C#", "Python"],
"Car": {
"Make&Model": "Maruti Suzuki Swift",
"MakeYear": 2017,
"Color": "Red",
"Type": "Hatchback"
}

},
{
"FirstName": "Tam",
"LastName": "Richard",
"employeeID": 896586,
"Designation": "Senior Manager",
"LanguageExpertise": ["Ruby", "C#"],
"Car": {
"Make&Model": "Hyundai Verna",
"MakeYear": 2015,
"Color": "Black",
"Type": "Sedan"
}
}

In the above Example, you can clearly see that we have included the data for two employees. Again, there are a few considerations while creating this kind of complex JSON structure. First, remember to include all the JSON structure inside a square bracket “[ ]”. A comma is used to separate the two different sets of data in a JSON, whether it’s a key-value pair or a JSON object.

As we get to the end of the tutorial, here is a little exercise for you all.

Create a company JSON with different key values.

Given below are the steps you will need to follow:

#1) Open a notepad or any text editor.

#2) Create a company JSON with different key-value pairs.

#3) Add data for at least two companies.

#4) Include an array field in the JSON.

#5) Use a nested JSON.

#6) Now navigate JSON Validator.

#7) Paste your JSON structure inside the text area and click on validate to validate your JSON.

Make sure you follow all the above procedures and rules while creating a JSON. Here is the validation of the employee JSON that we created earlier using JSON Validator.

Conclusion

JSON is one of the most popular data transition formats. It is mostly used for data transition between different networks. The text-based structure means that JSON can be read and deconstructed into individual data easily either by a user or by any machine.

JSON though sometimes being described as the subclass of JavaScript, can be read/modified by any programming language. JSON files have an extension of .json and can be created using any programming language.

You can create a simple JSON by directly assigning key-value pairs or using arrays to assign multiple values to a key. Other than the simple structure, JSON can also have a nested structure, which means a JSON can have another JSON object described inside it as a key. This allows the user to transmit more complex data through the format.

Please let us know if you have any queries or if you need more clarification.

Next Tutorial #2: Creating JSON Objects Using C# (Part 1)