Working with JSON in JavaScript

Working with JSON in JavaScript

We will explore JavaScript Object Notation (JSON) which is derived from JavaScript. JSON is used for data representation similar to XML or YML. JSON 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 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Understanding JSON in JavaScript - Learn JSON With Practical Examples

JSON stands for JavaScript Object Notation. The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text only. the code that generates JSON data can be written in any programming language, not only JavaScript.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.