<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const students = []
students.push({name : 'cloud', kor : 83, eng : 63, math : 95, sci : 83})
students.push({name : 'star', kor : 80, eng : 89, math : 97 , sci : 32})
students.push({name : 'winter', kor : 98, eng : 96, math : 54, sci : 83})
students.push({name : 'fall', kor : 80, eng : 42, math : 98, sci : 99})
alert(JSON.stringify(students, null, 2))
</script>
</head>
<body>
</body>
</html>### Key Points of the Script
- **Students Array**: An empty array `students` is initialized to store the student objects.
- **Populating the Array**: The `push` method is used to add objects to the `students` array. Each object represents a student and includes their name and scores in four subjects.
- **Displaying Data**: `JSON.stringify(students, null, 2)` is called to convert the `students` array into a formatted string with a two-space indentation, making the JSON structure easier to read in the alert dialog.
### Purpose and Usage
- This example demonstrates a basic way to manage and display complex data structures in JavaScript, emphasizing the storage of structured data (e.g., student records) in arrays and objects.
- The usage of `JSON.stringify` with indentation parameters highlights a method for presenting JSON data in a more human-readable format, which can be particularly useful for debugging or displaying information directly to end users.
### Considerations
- **Alert Dialog Limitations**: While using `alert` to display the JSON string is straightforward for demonstration purposes, it's not practical for large datasets or real-world applications due to its blocking nature and limited display capabilities.
- **Real-world Application**: In a more comprehensive application, this data might be manipulated to calculate averages, identify top-performing students, or filter based on specific criteria. The data could be displayed in a more user-friendly manner, such as dynamically generated tables on a webpage, rather than a simple alert dialog.
- **Data Storage and Retrieval**: In an actual application, the student data could come from a database or an external API, rather than being hard-coded into the script. JavaScript would be used to fetch the data, process it as shown, and then display it on the webpage.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| method) querySelectorAll() method (0) | 2025.01.13 |
|---|---|
| method) filter() (0) | 2025.01.12 |
| chapter 9) Override (2) | 2025.01.01 |
| chapter 9) declair class and new instance (0) | 2024.12.31 |
| chapter 9) toString() method override (0) | 2024.12.30 |