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
How to import an Object with Sub Objects and Arrays in JavaScript?
Importing objects with nested sub-objects and arrays in JavaScript using ES6 modules allows for modular code organization. This technique is essential for sharing complex data structures between different JavaScript files.
What are ES6 Modules?
ES6 modules use export and import statements to share code between files. The export default syntax allows exporting a single object, function, or value as the default export from a module.
Example: Importing Complex Objects
Let's create a complete example showing how to import an object containing nested objects and arrays.
sample.js (Module file)
export default {
firstName: "Rohan",
lastName: "Sharma",
school: {
name: "St Marks",
address: "USA",
grades: [85, 92, 78]
},
sports: ["cricket", "football", "tennis"],
contact: {
email: "rohan@example.com",
phone: "123-456-7890"
}
};
main.js (Importing file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Import Complex Object</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 16px;
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Importing Complex Objects</h1>
<div class="result"></div>
<script type="module">
// Import the object from sample.js
import studentData from './sample.js';
const resultDiv = document.querySelector('.result');
// Display basic properties
resultDiv.innerHTML = `
<h3>Student Information:</h3>
<p><strong>Name:</strong> ${studentData.firstName} ${studentData.lastName}</p>
<p><strong>School:</strong> ${studentData.school.name}, ${studentData.school.address}</p>
<p><strong>Grades:</strong> ${studentData.school.grades.join(', ')}</p>
<p><strong>Sports:</strong> ${studentData.sports.join(', ')}</p>
<p><strong>Contact:</strong> ${studentData.contact.email}</p>
`;
</script>
</body>
</html>
Accessing Nested Properties
When working with imported objects containing nested structures, you can access properties using dot notation or bracket notation:
<script type="module">
import studentData from './sample.js';
// Accessing nested object properties
console.log(studentData.school.name); // "St Marks"
console.log(studentData.contact.email); // "rohan@example.com"
// Accessing array elements
console.log(studentData.sports[0]); // "cricket"
console.log(studentData.school.grades[1]); // 92
// Using destructuring for cleaner code
const { firstName, lastName, sports } = studentData;
const { name: schoolName, address } = studentData.school;
console.log(`${firstName} ${lastName} studies at ${schoolName}`);
</script>
Key Points
- Use
export defaultto export a single object from a module - Import using
import objectName from './filename.js' - The
type="module"attribute is required in script tags for ES6 modules - Nested properties are accessed using dot notation:
object.property.subProperty - Arrays within objects can be accessed using bracket notation:
object.array[index] - Destructuring assignment can simplify accessing nested properties
Browser Compatibility
ES6 modules are supported in modern browsers. For older browsers, you may need a bundler like Webpack or Rollup, or use a transpiler like Babel.
Conclusion
Importing objects with nested structures using ES6 modules enables clean code organization and data sharing. This approach is fundamental for building modular JavaScript applications with complex data relationships.
629 Views
