How to access and process nested objects, arrays, or JSON ?

JavaScript is a scripting or programming language that allows you to implement complex features on web pages making them more dynamic than static websites. Many times, we require data structures like Objects, Arrays, or JavaScript Object Notation (JSON) to hold data temporarily which is either hardcoded or received from the database. Sometimes, when the data gets more complicated we tend to store it into nested or cascaded data structures i.e. container into another container for the ease of access and retrieval of data. Below mentioned are the methods of accessing such nested or cascaded systems of objects, arrays, and JSON. In this article, we will see the accessing of nested JavaScript Objects, Arrays, or JavaScript Object Notation (JSON). 

Objects: A JavaScript Object is a container that holds the properties of the object in a key-value pair. The properties of an object are accessed using dot notation or square brackets notation. Objects that contain objects inside them are called nested or cascaded Objects. Accessing the value in nested objects can be done by consecutively applying dot or square bracket notation.

Approach 1: Accessing properties using dot notation

Syntax:

objectName.property1Name.propert2Name...

The dot notation method checks for the property name inside the object and if it exists returns the value associated with that property inside the object. In case the returned value is an object, the sub-properties of that object can be accessed again using the dot notation till we reach the required property value.

Example: Consider an Object named person having properties name and contact where contact is an object consisting of properties phone, email, and address where address is an object consisting of properties namely city and country. To access the city property using dot notation can be done as person.contact.address.city

Javascript

let person = {
    name: "John",
    contact: {
        phone: "987-654-3210",
        email: "john123@xyz.com",
        address: {
            city: "Berlin",
            country: "Germany"
        }
    }
};

console.log(person.contact.email);
console.log(person.contact.address.city);

Output:

john123@xyz.com
Berlin

Approach 2: Accessing properties using square bracket notation

Syntax:

objectName[property1Name][propertyName2]...

The square bracket notation method checks for the property name inside the object by comparing the string value provided in square bracket notation to the properties of the object and if it exists, returns the value associated with that property inside the object. In case the returned value is an object, the sub-properties of that object can be accessed again in the same way till we reach the required property value.

Example: Consider an Object named person having properties name and contact where contact is an object consisting of properties phone, email, and address where address is an object consisting of properties namely city and country. To access the city property using square bracket notation can be done as a person[“contact”][“address”][“city”].

Javascript

let person = {
    name: "Shaun",
    contact: {
        phone: "934-379-1420",
        email: "shaun2000@abc.com",
        address: {
            city: "London",
            country: "United Kingdom"
        }
    }
};

console.log(person["contact"]["email"]);
console.log(person["contact"]["address"]["country"]);

Output:

shaun2000@abc.com
United Kingdom

Arrays: JavaScript array is a particular type of container that can hold more than one data of similar or different data types. Values in arrays can be accessed using an index (0-based indexing). Arrays that contain arrays inside them are called nested arrays or cascaded arrays. Accessing the value inside nested arrays can be done by consecutively using indexing in the array.

Syntax:

arrayName[index1][index2]...

Example: Consider an array of arrays namely arr. To access the value of the element at index 0 and inside that, at index 1 we use the following notation arr[0][1].

Consider the below code for accessing elements inside a nested array

Javascript

const arr = [
    ["Rohit Sharma",45],
    ["Virat Kohli",18],
    ["M S Dhoni",7]
];

console.log(arr[0][1]);
console.log(arr[2][0]);

Output

45
M S Dhoni

JavaScript Object Notation (JSON): JSON is a lightweight data-interchange format that is used to send data between computers or servers. JSON is almost similar to JavaScript Objects except for the fact that the keys in JSON should compulsorily be a string and the value can be of any data type except a function, a date, and undefined. Nested or cascaded JSON are accessed in the same way as JavaScript Objects except for the fact that the key strings that contain spaces, dots, or brackets are only accessible using the JavaScript Object square bracket notation.

Approach 1: Accessing JSON properties using dot notation

Syntax:

jsonObject.property1Name.property2Name...

Like JavaScript Objects, JSON properties can also be accessed using the dot notation in the same manner. In this, the property name provided is compared to the properties of the JSON and if there is a match it returns the corresponding value. If the returned value is another JSON object then its further sub-properties can be accessed in the same manner.

Example: Consider a JSON named myJSON having properties Boss, Department, Department id, and employees array of JSON where the JSON inside employees array consists of name and age. To access the name of the employee at index 1, dot notation can be done as myJSON.employees[1].name and using square bracket notation as myJSON[“employees”][1][“name”].

Javascript

let myJSON = {
    "Boss" : "John",
    "Department" : "Finance",
    "Department id": 3,
    "employees":[
        {
            "name":"Shaun",
            "age": 30
        },
        {
            "name":"Paul",
            "age" : 27
        }
    ]
};

console.log(myJSON.employees[1].name);
console.log(myJSON["employees"][1]["name"]);

Output

Paul
Paul

Approach 2: Accessing JSON properties using square bracket notation 

Syntax:

jsonObject["property1Name"]["property2Name"]...

Like JavaScript Objects, JSON properties can also be accessed using the square bracket notation in the same manner. In this, the string of the property name provided is compared to the properties of the JSON and if there is a match i.e if the string matches any property string inside the JSON then it returns the corresponding value. If the returned value is another JSON object then its further sub-properties can be accessed in the same manner.

Example: Consider a JSON named myJSON having properties Boss, Department, Department id, and employees array of JSON where the JSON inside employees array consists of name and age. To access the Department id property dot notation cannot be used due to the space between them and hence it becomes compulsory to use square bracket notation to avoid any syntactical error. This can be done as myJSON[“Department id”]

Javascript

let myJSON = {
    "Boss" : "John",
    "Department" : "Finance",
    "Department id": 3,
    "employees":[
        {
            "name":"Shaun",
            "age": 30
        },
        {
            "name":"Paul",
            "age" : 27
        }
    ]
};

console.log(myJSON["Department id"]);

Output

3