Displaying Nested Event Data from JSON
In the previous tutorial, you displayed device information in a table. In this tutorial, you will work with nested JSON data by displaying the security events associated with each device.
The JSON file contains devices, and each device contains its own list of events.
Understanding the JSON Structure
The JSON file contains:
Home
└ Devices
└ Events
Example:
{
"deviceId": "CAM-01",
"events": [
{
"eventType": "motion_detected"
}
]
}
To display the events, we need to loop through:
- The devices
- The events within each device
Create an Events Table
Open:
script.js
Replace the previous code with:
fetch("smart_security_data.json")
.then(response => response.json())
.then(data => {
let html = `
<h2>Security Events</h2>
<table border="1">
<tr>
<th>Device ID</th>
<th>Event Type</th>
<th>Severity</th>
</tr>
`;
data.devices.forEach(device => {
device.events.forEach(event => {
html += `
<tr>
<td>${device.deviceId}</td>
<td>${event.eventType}</td>
<td>${event.severity}</td>
</tr>
`;
});
});
html += "</table>";
document.getElementById("output").innerHTML = html;
});
View the Results
Open:
http://localhost/json-demo/
You should see a table similar to:
| Device ID | Event Type | Severity |
|---|---|---|
| CAM-01 | motion_detected | high |
| CAM-01 | remote_access_attempt | critical |
| LOCK-02 | unlock_attempt | medium |
Add Additional Event Information
The JSON file contains more information about each event.
Each event includes:
timestamp
eventType
dataTransmitted
severity
accessResult
Update the table headings:
<tr>
<th>Device ID</th>
<th>Timestamp</th>
<th>Event Type</th>
<th>Severity</th>
<th>Access Result</th>
</tr>
Update the Table Rows
Replace the existing row code with:
html += `
<tr>
<td>${device.deviceId}</td>
<td>${event.timestamp}</td>
<td>${event.eventType}</td>
<td>${event.severity}</td>
<td>${event.accessResult}</td>
</tr>
`;
Refresh the page.
The table should now display more detailed event information.
Display the Device Type
Sometimes multiple devices may generate events.
Add another column heading:
<th>Device Type</th>
Update the row:
<td>${device.deviceType}</td>
Your table will now identify which type of device generated each event.
Complete JavaScript File
fetch("smart_security_data.json")
.then(response => response.json())
.then(data => {
let html = `
<h2>Security Events</h2>
<table border="1">
<tr>
<th>Device ID</th>
<th>Device Type</th>
<th>Timestamp</th>
<th>Event Type</th>
<th>Severity</th>
<th>Access Result</th>
</tr>
`;
data.devices.forEach(device => {
device.events.forEach(event => {
html += `
<tr>
<td>${device.deviceId}</td>
<td>${device.deviceType}</td>
<td>${event.timestamp}</td>
<td>${event.eventType}</td>
<td>${event.severity}</td>
<td>${event.accessResult}</td>
</tr>
`;
});
});
html += "</table>";
document.getElementById("output").innerHTML = html;
});
What Happened?
In the previous tutorial, you looped through a single array:
data.devices
In this tutorial, you looped through:
data.devices
and then:
device.events
This is known as a nested loop and is commonly used when working with JSON files and APIs.
You have successfully displayed nested JSON data in a table.
Next tutorial: Creating a Security Dashboard from JSON Data.