index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Properties Analyzer</title>
<style>
/* CSS Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f4f4f4;
    padding: 20px;
}

/* Main Container Styling */
.container {
    max-width: 1200px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

/* Header Styling */
h1 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 2.5em;
}

/* Card Component Styling */
.card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    transition: box-shadow .3s;
}
.card:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.card-title {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #34495e;
}

/* File Upload Section Styling */
.file-upload {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload label {
    background: #3498db;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .3s;
}
.file-upload label:hover {
    background-color: #2980b9;
}
#fileCount {
    margin-left: 15px;
    color: #7f8c8d;
}

/* Button Group Styling */
.button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
button {
    background: #2ecc71;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all .3s;
}
button:hover {
    background: #27ae60;
}
button:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Copy Table Button Styling */
#copyTableButton {
    background: #3498db;
    margin-bottom: 15px;
}
#copyTableButton:hover {
    background: #2980b9;
}

/* Table Styling */
.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}
th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}
th {
    background: #f2f2f2;
    font-weight: bold;
    color: #2c3e50;
    position: sticky;
    top: 0;
    z-index: 10;
}
.property-column {
    position: sticky;
    left: 0;
    background: #f2f2f2;
    z-index: 20;
}
.changed {
    background: #fff9c4;
}
.cell-content {
    max-height: 100px;
    overflow-y: auto;
    word-break: break-word;
}

/* Timestamp Row Styling */
.timestamp-row {
    background: #ecf0f1;
    font-style: italic;
}

/* Alert Styling */
.alert {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
}

/* Utility Class */
.hidden {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    .button-group {
        flex-direction: column;
    }
    button {
        width: 100%;
    }
}
</style>
</head>
<body>
<div class="container">
    <h1>JSON Properties Analyzer</h1>
    
    <!-- File Upload Section -->
    <div class="card">
        <div class="card-title">Upload JSON Files</div>
        <div class="file-upload">
            <label for="fileUpload">Choose Files</label>
            <input type="file" id="fileUpload" multiple accept=".json">
            <span id="fileCount">0 file(s) selected</span>
        </div>
    </div>
    
    <!-- Action Buttons -->
    <div class="button-group">
        <button id="analyzeButton">Analyze</button>
        <button id="exportJsonButton" class="hidden">Export JSON</button>
        <button id="exportCsvButton" class="hidden">Export CSV</button>
        <button id="copyTableButton" class="hidden">Copy Table</button>
    </div>
    
    <!-- Error Alert Placeholder -->
    <div id="errorAlert" class="alert hidden"></div>
    
    <!-- Results Display Area -->
    <div id="resultCard" class="card hidden">
        <div class="card-title">Properties Analysis</div>
        <div class="table-container">
            <div id="analysisTable"></div>
        </div>
    </div>
</div>

<script>
// Global variables to store file and payload data
let files = []; // Stores the selected files
let payloads = []; // Stores the parsed JSON data from the files

// DOM element references for improved performance
const fileUpload = document.getElementById('fileUpload');
const fileCount = document.getElementById('fileCount');
const analyzeButton = document.getElementById('analyzeButton');
const exportJsonButton = document.getElementById('exportJsonButton');
const exportCsvButton = document.getElementById('exportCsvButton');
const copyTableButton = document.getElementById('copyTableButton');
const errorAlert = document.getElementById('errorAlert');
const resultCard = document.getElementById('resultCard');
const analysisTable = document.getElementById('analysisTable');

// Event listener for file selection
fileUpload.addEventListener('change', (event) => {
    files = Array.from(event.target.files); // Convert FileList to array
    fileCount.textContent = `${files.length} file(s) selected`;
    analyzeButton.disabled = files.length === 0; // Disable analyze button if no files are selected
});

// Event listeners for buttons
analyzeButton.addEventListener('click', analyzeJson);
exportJsonButton.addEventListener('click', exportJson);
exportCsvButton.addEventListener('click', exportCsv);
copyTableButton.addEventListener('click', copyTable);

/**
 * Main function to analyze the JSON files
 * This function is called when the "Analyze" button is clicked
 */
async function analyzeJson() {
    try {
        // Read and parse all JSON files
        payloads = await Promise.all(files.map(file => readFileAsJson(file)));
        
        // Extract properties from each payload, add file names and timestamps
        payloads = payloads.map((payload, index) => ({
            fileName: files[index].name,
            properties: payload.properties || {}, // Use an empty object if properties is undefined
            timestamp: payload.timestamp || new Date().toISOString() // Use current time if timestamp is not provided
        }));
        
        // Sort payloads by timestamp
        payloads.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
        
        // Render the analysis table
        renderAnalysis();
        
        // Show export and copy buttons
        exportJsonButton.classList.remove('hidden');
        exportCsvButton.classList.remove('hidden');
        copyTableButton.classList.remove('hidden');
    } catch (error) {
        showError(error.message);
    }
}

/**
 * Reads a file and parses it as JSON
 * @param {File} file - The file to read
 * @returns {Promise<Object>} - Parsed JSON object
 */
function readFileAsJson(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                resolve(JSON.parse(e.target.result));
            } catch (error) {
                reject(new Error(`Failed to parse ${file.name}: ${error.message}`));
            }
        };
        reader.onerror = () => reject(new Error(`Failed to read ${file.name}`));
        reader.readAsText(file);
    });
}

/**
 * Formats a timestamp string into a more readable format
 * @param {string} timestamp - The timestamp to format
 * @returns {string} - The formatted timestamp
 */
function formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString('en-US', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    });
}

/**
 * Renders the analysis table
 * This function creates an HTML table comparing properties across all JSON files
 */
function renderAnalysis() {
    // Collect all unique properties across all payloads
    const allProperties = new Set();
    payloads.forEach(payload => Object.keys(payload.properties).forEach(prop => allProperties.add(prop)));

    // Start building the HTML table
    let tableHtml = '<table><thead><tr><th class="property-column">Property</th>';
    payloads.forEach((payload) => {
        tableHtml += `<th>${payload.fileName}</th>`;
    });
    tableHtml += '</tr></thead><tbody>';

    // Add timestamp row with formatted timestamps
    tableHtml += '<tr class="timestamp-row"><th>Timestamp</th>';
    payloads.forEach(payload => {
        tableHtml += `<td>${formatTimestamp(payload.timestamp)}</td>`;
    });
    tableHtml += '</tr>';

    // Add rows for each property
    allProperties.forEach(property => {
        tableHtml += `<tr><th class="property-column">${property}</th>`;
        payloads.forEach((payload, index) => {
            const value = payload.properties[property];
            const prevValue = index > 0 ? payloads[index - 1].properties[property] : undefined;
            const hasChanged = JSON.stringify(value) !== JSON.stringify(prevValue);
            tableHtml += `<td class="${hasChanged ? 'changed' : ''}"><div class="cell-content">${formatValue(value)}</div></td>`;
        });
        tableHtml += '</tr>';
    });

    tableHtml += '</tbody></table>';
    
    // Insert the table into the DOM and show the result card
    analysisTable.innerHTML = tableHtml;
    resultCard.classList.remove('hidden');
}

/**
 * Formats a value for display in the table
 * @param {*} value - The value to format
 * @returns {string} - The formatted value
 */
function formatValue(value) {
    if (value === undefined) return '';
    return typeof value === 'object' ? JSON.stringify(value) : String(value);
}

/**
 * Exports the analysis data as JSON
 * This function is called when the "Export JSON" button is clicked
 */
function exportJson() {
    downloadFile(JSON.stringify({ payloads }, null, 2), 'properties_analysis.json', 'application/json');
}

/**
 * Exports the analysis data as CSV
 * This function is called when the "Export CSV" button is clicked
 */
function exportCsv() {
    const allProperties = new Set();
    payloads.forEach(payload => Object.keys(payload.properties).forEach(prop => allProperties.add(prop)));

    // Create CSV header
    let csvContent = 'Property,' + payloads.map(payload => payload.fileName).join(',') + '\n';

    // Add timestamp row with formatted timestamps
    csvContent += 'Timestamp,' + payloads.map(payload => formatTimestamp(payload.timestamp)).join(',') + '\n';

    // Add rows for each property
    allProperties.forEach(property => {
        csvContent += `${property},` + payloads.map(payload => 
            JSON.stringify(payload.properties[property] ?? '')
        ).join(',') + '\n';
    });

    downloadFile(csvContent, 'properties_analysis.csv', 'text/csv');
}

/**
 * Helper function to trigger file download
 * @param {string} content - File content
 * @param {string} fileName - Name of the file to be downloaded
 * @param {string} contentType - MIME type of the file
 */
function downloadFile(content, fileName, contentType) {
    const a = document.createElement('a');
    const file = new Blob([content], { type: contentType });
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}

/**
 * Displays an error message
 * @param {string} message - Error message to display
 */
function showError(message) {
    errorAlert.textContent = message;
    errorAlert.classList.remove('hidden');
}

/**
 * Copies the analysis table to the clipboard
 * This function is called when the "Copy Table" button is clicked
 */
function copyTable() {
    const range = document.createRange();
    range.selectNode(analysisTable.querySelector('table'));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    alert('Table copied to clipboard!');
}
</script>
</body>
</html>