Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Accessing and returning nested array value - JavaScript?
Each value in an array is referred to as an element, and each element has a certain numerical location in the array, which is referred to as its index.
Nested Arrays, a feature of JavaScript, allow us to create arrays inside arrays. One or more arrays can be used as the elements of nested arrays. Although the term may be a little unclear, as we look further, it is actually rather fascinating.
Understanding Nested Arrays
In JavaScript, a nested array is described as an Array (outer array) inside another array (inner array). One or more inner arrays are possible for an array. These nested arrays (inner arrays) are accessible using the outer array's object name since they fall under the outer array's scope.
Syntax
Following is the syntax for nested array:
var arr = [[values, [nested_value, ...], ...]]
Basic Array Access
To access nested array elements, use bracket notation with multiple indices. The first index accesses the outer array, the second index accesses the inner array:
<!DOCTYPE html>
<html>
<body>
<script>
var numbers = [100, 1345, 80, 75, 1000, [35, 55, 67, 43, 51, 78]];
// Access the nested array at index 5
var nestedArray = numbers[5];
console.log("Nested array:", nestedArray);
// Access specific element (78) from nested array
var value = numbers[5][5];
console.log("Value at numbers[5][5]:", value);
// Direct access
console.log("Direct access numbers[5][2]:", numbers[5][2]);
</script>
</body>
</html>
Nested array: [35, 55, 67, 43, 51, 78] Value at numbers[5][5]: 78 Direct access numbers[5][2]: 67
Accessing Objects in Nested Arrays
When working with arrays containing objects, you can filter and access specific properties based on conditions:
<!DOCTYPE html>
<html>
<body>
<script>
let obj = {
arr1: [
{ car: 'BMW', year: 2018 },
{ car: 'BENZ', model: "Top-End" },
{ car: 'AUDI', engine: "4.0 TFSI" }
],
arr2: [
{
car: 'RX100',
columns: ['AUDI']
}
]
}
// Filter arr1 based on cars listed in arr2.columns
let result = obj.arr1.filter(({car}) => obj.arr2[0].columns.includes(car));
console.log("Filtered result:", JSON.stringify(result));
</script>
</body>
</html>
Filtered result: [{"car":"AUDI","engine":"4.0 TFSI"}]
Searching in Complex Nested Structures
For more complex nested structures with mixed arrays and objects, you can use loops to search and return values:
<!DOCTYPE html>
<html>
<body>
<script>
const courses = [
{
"company": "TutorialsPoint",
"courses": [
{
"Name": 'HTML',
"Price": 4500
},
{
"Name": 'JAVA',
"Price": 5000
}
]
},
{
"Name": "PYTHON",
"Price": 3500
}
];
let foundCourse;
// Search for course with price 4500
outer: for (const element of courses) {
for (const course of element.courses || []) {
if (course.Price === 4500) {
foundCourse = course.Name;
break outer;
}
}
}
console.log("Course with price 4500:", foundCourse);
</script>
</body>
</html>
Course with price 4500: HTML
Key Points
- Use bracket notation
[index][innerIndex]for accessing nested arrays - Check if nested properties exist using
|| []to avoid errors - Use labeled breaks like
outer:for early exit from nested loops - Array methods like
filter()work well with nested structures
Conclusion
Accessing nested array values requires understanding the structure and using appropriate indexing or iteration methods. Always validate nested properties exist to prevent runtime errors when working with complex nested data structures.
2K+ Views
