Join Class

JSON Tutorial for beginners and professionals

JSON tutorial for beginners and professionals, Here you learn about JSON fundamentals, example, json syntax, array, object, encode, decode, file, date and date format.

Here is a quick example how we can create json data in JavaScript code and search element based on attribute value.

const students = [
    {id: 1, name: 'Anusua', location: 'Kolkata' },
    {id: 2, name: 'Debopriya', location: 'Mumbai' }, 
    {id: 3, name: 'Deepak', location: 'Hyderabad' },
    {id: 4, name: 'Gargi', location: 'Kolkata' }

var s1 = students.filter(function(item) { return item.location === 'Kolkata'; });

Above “students” object also known as json array, and you can see how to find an item from json array.

Learn Json data structure

You also learn how to use JSON with different technologies like Asp.Net MVC, PHP, Jquery, Ajax etc.

Before you start learning JSON, I assume you are familiar with JavaScript, In this JSON Tutorial we will learn about how to use client side script to interact with server side, how to write client script function using json and javascript for real time web application development.

What is JSON?
JSON (JavaScript Object Notation) is a lightweight data-interchange format. It supports data structures like array and object collection, Yes, In some situation JSON file is used for storing data also.

this is how JSON format look like, you can create JSON format without using any JSON formatter

    {"fullname":"Akansha Kulkarni", "contact":"9852100001"},  
    {"fullname":"Arunavo Chaterjee", "contact":"9852100002"},  
    {"fullname":"Shanthi Gopalan", "contact":"9852100003",
    {"fullname":"Prajakta Shah", "contact":"9852100004"}   

Let’s understand the JSON Format with json data structure example
“section-key” :{ “key1”:”value1”, “key2”:”value2”}

We can use json data structure for storing configuration information or any application setting related information in config file, the structure remain same, look at the example below.

We can save above json data file with .json extension.

JSON is language independent and supports data structures such as array and objects, using JSON we can easily interact with different applications built on using different technologies, it makes cross-platform data exchange more easy .

Now to let’s see how to retrieve one property value from json object, we use the same “students” object in example below.

const students = [
    {id: 1, name: 'Anusua', location: 'Kolkata' },
    {id: 2, name: 'Debopriya', location: 'Mumbai' } 

console.log(students[1].name); // Debopriya

As you can see in above code, to read the name property of second element from json object, we have used indexed item then property name like students[1].name.

To add a new item in json array we can simply use comma with {}, inside bracket we can define property value of new element, like {id: 3, name: 'Deepak', location: 'Hyderabad' }

Here are few JSON examples to look at