How to use JSON Objects in Cypress

Table of contents

Reading Time: 3 minutes

Hello Readers, Today we will learn about JSON objects’ significance and how to use them in Cypress.

What are JSON Objects?

javascript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax that is commonly used for transmitting data in web applications. surrounded by curly braces { } and contain a key/value format that is separated by a colon( : ).

Syntax for JSON

Objects are enclosed in braces ({}), their name-value pairs are separated by a comma (,), and the name and value in a pair are separated by a colon (:).
Names in an object are strings, whereas values may be of any of the seven value types, including another object or an array.
Arrays are enclosed in brackets ([]), and their values are separated by a comma (,).
Each value in an array may be of a different type, including another array or an object.
When objects and arrays contain other objects or arrays, the data has a tree-like structure.

Example:-

{
   "Name" : "Hitesh Mahi",
     
   "Age"  : 24,

   "Designation" : "Software Consultant" 
}

In the example, mentioned above we have a JSON snippet code in which the left-hand side is the “Key” and the Right-Hand side is the “Value” that is separated by a colon it is the basic syntax for Javascript Object Notation.

JSON Objects Types:-

The Types for the JSON Objects are sub-divided into the following ways:-

Simple Objects (They are in the combination of key and value)
Simple Array of Values (They are arrays with an Index value)
Simple Array of Objects (These are the Array within an Object)
Types of Data ( Data that is assigned with an immediate value)

Code Snippets for the Above Types

 const simpleObject = {"key" : "value", "key2": "value2"}

const simpleArrayOfValues = ["one", "two", "three"]

const arrayOfObjects = [{"key":"value"}, {"key2":"value2"},{"key3":"value3"}]

const typesofData = {"String": "this is a string", "number":100}

Example Code

        /// <reference types = "cypress" />

/* Command for Auto Suggestions in Cypress */

describe('JSON Objects', ()=> {

    
 it('JSON Objects',() =>{
 
/* Simple Object with Key and Value  */        
        

const simpleObject = {"key" : "value", "key2": "value2"}

/* Simple Array with Index Value */        
        

const simpleArrayOfValues = ["one", "two", "three"]

/* Array of Objects for the Array within an Object */


const arrayOfObjects = [{"key":"value"}, {"key2":"value2"},{"key3":"value3"}]


/* Types Data with an Immediate Value */


const typesofData = {"String": "this is a string", "number":100}
  

/* Mix of all Types */


const mix = 

{
            "FirstName": "Hitesh",

            "LastName": "Mahi",
 
            "Age": 24,
            

             "Students" : [
                
                {
                    "firstName":"Tony",

                    "LastName": "conor"
                },
                

                {
                    "firstname":"Andrew",

                    "Lastname": "Knight"
                }

            ]
        }

/* Printing the Value on Console */

              
 console.log(simpleObject.key)
    
        
console.log(simpleObject["key2"])
        
console.log(simpleArrayOfValues[2])
        
console.log(arrayOfObjects[2].key3)
        
console.log(mix.Students[0].firstName)

    })

})