Working with JSON in JavaScript

In this blog we will explore JavaScript Object Notation (JSON) which is derived from JavaScript. JSON is used for data representation similar to XML or YML. It is mainly used while transferring data and data storage, owing to it being lightweight in nature. It is used in API communication for sending requests from client and receiving responses from servers over the internet. As JSON is derived from JavaScript anything we write in JSON is a valid JavaScript. All major languages support JSON. They have built-in support to parse JSON strings into object and use JSON in their communication to send requests and receive data. In the coming sections we will explore JSON a bit more and look at its syntaxes.

What is JSON:

As stated above, JSON being extremely lightweight can be used with almost all programming languages for communication. JSON can reside as a file with .json, as an object or we can also use it as a String in the programming context. Initially JSON was made for JavaScript but its cross-platform adaptability has made it suitable to work with different programming languages that provide their own set of built-in libraries to support JSON. Just like XML, JSON is a text format but occupies lesser bandwidth than XML and offers faster processing of data. JSON can be built based on the below structures.

Unordered collection of Key/value pairs called as objects.

Syntax – {“key1” : “value1”, 
                  “key2” : “value2”, …, 
                 “keyN” : “valueN”,              
}

As an Array, which is an ordered list of values, defined within open ([) and closed (]) brackets separated by comma (,)

{ 
    "test": [ "value1", 
                   "value2", 
                     ...., 
                    "valueN" 
                 ] 
    }

In JSON the keys / property names will always be defined as strings and values can be of any data type. We can also have an object or an array. Below is a sample of JSON object.

          { 
              "student": { 
                       "studentName": "ABJ Abdul Kalam", 
                       "course": "M.Sc", 
                       "year": 2020, 
                      "studentId": "Msc2020"  
                            } 
        }

JSON** Syntax Rules:-** As discussed in the above sections we can define JSON using JSON objects or JSON Arrays

JSON Object Syntax rules-

JSON object starts with opening and closing curly braces {}.
Keys / Property names defined in object should be String and enclosed within double quotes “ ”.
Values in the object can be any valid data type object or even an array, enclosed within double quotes.
Key and values are separated using colon (:).
We can add multiple key/value pairs. Each key value is separated by a comma (,).

JSON as an array- Just like in other programming languages, JSON also has a similar format in defining the array. An array is a collection of data.

Arrays start with opening ([) and closed (]) bracket.
Values inside the array are separated by comma (,).

JSON** Data Types and Objects:-** As in every programming language JSON also has its data types, below are the list of data types which JSON format supports. JSON has 3 types of data types.

JSON Scalar
JSON Array
JSON Object

**JSON Scalar – **Can be Number, String, null or Boolean.

Number – JSON numbers follow JavaScript double-precision floating point format, represented in base 10. Hexadecimal and octal are not supported as numbers in JSON.

Contains digits 0 – 9
We can use negative numbers (-1)
Fractions are also supported (.25)
Supports Exponentiation
No support for hexadecimal and octal

Ex --  
     {  
       "num”: 100, 
       "num1”: -10, 
       "num2”: 10.23, 
       "num3”: 2.0E+4 
     }

**String – **String is a collection of characters enclosed within double quotes (“ “).

Ex --

        { 
            “name” : “KnowledgeHut” 
           }

JSON strings support the below list of escaped / back slack characters.

" – Double quote

\b – Backspace

\t – Tab

\u – Trailed by four hex digits

\ – Backslash

\n – Newline

/ – Forward slash

\f – Form feed

\r – Carriage return

Boolean – JSON supports boolean values which can be either true/false.

Ex –

         { 
            “flag” : true 
          }

Null – When we do not assign any value to the key it is known as null.

Ex –

  { 
            “flag” :  //empty 
          }

JSON Array:- JSON array is an order collection of data, that starts with open ([) and ends with (]) brackets, values inside the array are separated by commas (,).

Ex-

    { 
      “vegetables” : [“potato”,”tomato”,”brinjal”,”cucumber”] 
   }

**JSON Object:- **As object is a collection of unordered key/value pairs. They start with opening and closing curly braces {} and all the Keys / Property names defined in object should be String and enclosed within double quotes “ ”. The values in the object can be any valid data type, object or even an array, enclosed within double quotes. Keys and values are separated using colon (:) and we can add multiple key/value pairs, each key value is separated by a comma (,).

          { 
              "student": { 
                       "studentName": "ABJ Abdul Kalam", 
                       "course": "M.Sc", 
                       "year": 2020, 
                      "studentId": "Msc2020"  
                            } 
        }

#javascript #json #web-development #programming #developer

What is JSON:

knowledgehut.com

Working with JSON in JavaScript