Last Updated : 22 Aug, 2024
Summarize
Comments
Improve
JavaScript is used to bring interactivity to web pages. One of its features is handling data structures like Objects, Arrays, or JavaScript Object Notation (JSON). As data becomes more complex, it’s common to organize it into nested structures, where an object or array contains other objects, arrays, or JSON data within it. This article will help you to find the best methods for accessing and processing these nested structures in JavaScript.
Accessing and Processing Nested JavaScript Objects
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 reaccessed using the dot notation till we reach the required property value.
Example: Consider an object named person with a name and contact where a contact is an object consisting of properties such as phone, email, and address whereas an address is an object consisting of city and country properties. To access the city property using dot notation can be done as person.contact.address.city
let person = { name: "John", contact: { phone: "987-654-3210", email: "[email protected]", address: { city: "Berlin", country: "Germany" } }};console.log(person.contact.email); console.log(person.contact.address.city);
Output
[email protected]
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”].
let person = { name: "Shaun", contact: { phone: "934-379-1420", email: "[email protected]", address: { city: "London", country: "United Kingdom" } }};console.log(person["contact"]["email"]); console.log(person["contact"]["address"]["country"]);
Output
[email protected] Kingdom
Accessing and Processing Nested JavaScript Arrays
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
const arr = [ ["Rohit Sharma",45], ["Virat Kohli",18], ["M S Dhoni",7]];console.log(arr[0][1]); console.log(arr[2][0]);
Output
45M S Dhoni
Accessing and Processing Nested JSON Data
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”].
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
PaulPaul
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”]
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
When working with nested data structures in JavaScript—whether they’re objects, arrays, or JSON—it’s important to choose the right method to access and manipulate data. Dot notation is concise and easy to use but is limited to keys that are valid identifiers. Square bracket notation is more flexible and allows for dynamic key access, making it suitable for complex or irregularly structured data.
nkhatri393
Improve
Next Article
How to access nested object in ReactJS ?
