JSON Tutorial for Beginners: Syntax, Examples, Data Types

JSON Tutorial : A Complete JSON Tutorial Series for Beginners

JSON stands for JavaScript Object Notation. JSON is a compact format of data that is used to store and exchange data between applications. It is very popular in web development and in APIs since JSON is easily readable and easily processed due to its simple structure. For example, an API might return a customer’s name, account status, and order history in a JSON response.

In this JSON tutorial for beginners, you will study JSON syntax, key-value pairs, JSON data types, JSON objects, JSON arrays, and nested JSONs through practical examples. In addition, you will get to know how to create and validate a JSON file, as well as how to recognize typical syntax mistakes.

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: Examples and Syntax

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.

What Is JSON and How Is It Used?

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.

How It Is Used

• Client-Server Interaction via Web APIs: JSON is the default protocol for transferring data between clients (like browsers and mobile applications) and servers.
• JSON Configuration Files: Various software programs, including those written by developers, use .json files for configurations and dependancy management.
• JSON as a Storage Format for NoSQL Databases: Document-based noSQL databases such as MongoDB use JSON or Binary JSON formats for data storage and retrieval.

Simple JSON Example

Here is an example of a valid JSON object that describes the profile of a person. This example includes typical types of data: string, number, boolean, array, and nested object:

JSON
{
  "name": "Jane Doe",
  "age": 28,
  "isDeveloper": true,
  "skills": ["Java", "Python", "SQL"],
  "address": {
    "city": "Boston",
    "zipCode": "02110"
  }
}

Explanation of Keys and Values

•              “name”: “Jane Doe”

Key-value pair where “name” is a key and the value “Jane Doe” represents text.

•              “age”: 28

Number type data where the value 28 represents the age of the person. JSON does not use quotes for numbers.

•              “isDeveloper”: true

Boolean value that describes conditional state where possible values include true and false. Booleans are not quoted.

•              “skills”: [“Java”, “Python”, “SQL”]

Array represented by square brackets [] which contains a collection of string values.

•              “address”: { … }

Nested object represented by curly braces {} that contains a group of related data points (city and zip code).

Key Properties and Features 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.
• Hierarchical Structure: You can use objects ({}) and arrays ([]) to nest the data which helps you represent complex structures with multiple layers of relationship.
• Data Types Supported: JSON uses a small number of basic data types namely strings, numbers, booleans, nulls, arrays and nested objects.
• No Schema Required: As a format, JSON does not use a predefined schema but rather allows dynamic manipulation of fields like addition or deletion.
• Easy to Human and Machine Read: JSON is easily understandable to developers because of its simplicity and easy to debug and read by hand and at the same time easy for machine processing.

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.

JSON Syntax Rules

1. Principles of Core Syntax

•              Name/Value Pairs: The data is represented as name/value pairs which have the field name (which is always enclosed in double quotations) followed by a colon followed by its value (“name”: “value”).

•              Objects: Objects are a set of unordered name/value pairs that are enclosed within curly braces ({}).

•              Arrays: Arrays are a set of ordered values that are enclosed within square braces ([]).

2. Important Formatting Requirements

•              Doubles Quotes: Both the keys and the string values are always enclosed within double quotation marks (“). Single quotes (”) cannot be used in JSON.

•              Colon (:): All the keys have to be separated by a colon from their corresponding value.

•              Comma (,): All the name/value pairs as well as array items must be separated by commas.

3. Common JSON Mistakes to Avoid

•              Trailing Comma: In contrast to other programming languages, JSON doesn’t permit a comma at the end of the list of objects/arrays items.

o             Incorrect: {“name”: “Jane”, “age”: 28,}

o             Correct: {“name”: “Jane”, “age”: 28}

•              Unquoted Keys: Keys should always be enclosed within double quotes; otherwise, the syntax becomes invalid.

o             Incorrect: {name: “Jane”}

o             Correct: {“name”: “Jane”}

•              Incorrect Usage of Single Quotes: You can’t use single quotes in JSON strings/keys.

o             Incorrect: {‘name’: ‘Jane’}

o             Correct: {“name”: “Jane”}

•              Invalid Data Types: JSON doesn’t support such data types as undefined, functions, NaN or hexadecimal numbers.

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.

JSON Objects and Key-Value Pairs

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.

How to Create and Validate a JSON File

Making and validating a JSON file is an easy procedure. But since the structure of JSON files requires accuracy and precision, even a little error such as a missing comma or quote might lead to parsing problems. Below is an easy walk-through guide.

Step 1: Making a JSON File

1.            Use a Text Editor: Use any programming or text editor like Visual Studio Code, Notepad++, Sublime Text, or even Notepad.

2.            Type/Paste Your JSON data: Make sure you are following JSON structure rules (double quotes for strings and keys, etc.).

JSON
{
  "company": "TechCorp",
  "active": true,
  "employeeCount": 150,
  "departments": ["Engineering", "Marketing", "Sales"]
}

1. Save the File: Save the document with the .json extension (e.g., config.json or data.json). Ensure your editor doesn’t accidentally append a hidden .txt extension (e.g., config.json.txt).

Step 2: Validate Your JSON File

Validation checks that your file does not contain any syntax errors before your application tries to read the file. Here are some methods you can use for validating JSON files:

•              Use a Modern Code Editor (Recommended)

Modern code editors such as Visual Studio Code and WebStorm have JSON parsers. They underline any syntax errors (such as a comma at the end of a statement or missing quotation marks) in red and display an error message.

•              Using Online Validators

If you need a fast way to validate your JSON, you can enter your code in an online validator like JSONLint, which parses your text and displays where the syntax error occurs in terms of lines and characters.

•              Use Command-Line Tools (jq)

If you develop using a terminal, you can use jq to validate your JSON file from the command line instantly:

Bash
jq . config.json

  If the file is valid, jq outputs formatted JSON; if invalid, it outputs a detailed syntax error.

  Using Programmatic Validation:

Most programming languages can check JSON validity during runtime. For example, in Python:

Python
import json

try:
    with open("config.json", "r") as f:
        data = json.load(f)
    print("JSON is valid!")
except json.JSONDecodeError as e:
    print(f"Invalid JSON: {e}")

Common JSON Errors and How to Fix Them

Due to JSON’s strict syntax structure, the placement of just one wrong character may result in parsing failure. These are the common JSON syntax errors and their corresponding fixes.

1. Trailing Commas

JSON does not allow a comma after the last item in an object or an array.

• Incorrect:

JSON
{
  "name": "Jane",
  "age": 28,
}

Correct:

JSON
{
  "name": "Jane",
  "age": 28
}

2. Using Single Quotes or Unquoted Keys

All keys and string values must be enclosed in double quotes (“). Single quotes (‘) and unquoted keys will trigger parsing errors.

Incorrect:

JSON
{
  name: 'Jane',
  "age": 28
}

Correct:

JSON
{
  "name": "Jane",
  "age": 28
}

3. Missing Commas Between Elements

Adjacent key-value pairs within an object or items within an array must be separated by a comma. Forgetting a comma is one of the most frequent typos.

Incorrect:

JSON
{
  "firstName": "John",
  "lastName": "Doe"
  "age": 30
}

Correct:

JSON
{
  "firstName": "John",
  "lastName": "Doe",
  "age": 30
}

4. Adding Comments or Using Unsupported Formats

Standard JSON does not support comments (// or /* … */), undefined values, or numbers with leading zeros (such as octal notation).

Incorrect:

JSON
{
  // User configuration
  "id": 012,
  "active": true
}

Correct:

JSON
{
  "id": 12,
  "active": true
}

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.

While dealing with JSON data, keep in mind such things as double quotes, commas, colons, and proper structure of key-value pairs.

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.

A minor mistake may ruin an entire JSON document making it unusable for further use in application or test cases. Practice writing JSON documents, playing with different structures, and validating examples with JSON validator. In case you are a software tester, consider JSON usage for test data generation and response analysis

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)