<!DOCTYPE html>
<html>
<head>
<title>File Parser</title>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js”></script>
<script>
$(document).ready(function() {
// Get the file input element
var fileInput = document.getElementById(‘fileInput’);
// When a file is selected
fileInput.addEventListener(‘change’, function(e) {
// Get the selected file
var file = e.target.files[0];
// If the file is a JSON file
if (file.type == ‘application/json’) {
// Read the file as text
var reader = new FileReader();
reader.onload = function(e) {
// Parse the JSON data
var jsonData = JSON.parse(e.target.result);
// Create the table element
var table = document.getElementById(‘dataTable’);
// Create the table headers
var headers = [‘Customer name’, ‘Result’, ‘Activity name’, ‘Start time’, ‘Finish time’, ‘Duration’, ‘Started by’];
var headerRow = table.insertRow(0);
for (var i = 0; i < headers.length; i++) {
var cell = headerRow.insertCell(i);
cell.innerHTML = headers[i];
}
// Create the table rows
for (var i = 0; i < 25 && i < jsonData.length; i++) {
var row = table.insertRow(i + 1);
row.insertCell(0).innerHTML = jsonData[i].customer_name;
row.insertCell(1).innerHTML = jsonData[i].result;
row.insertCell(2).innerHTML = jsonData[i].activity_name;
row.insertCell(3).innerHTML = jsonData[i].start_time;
row.insertCell(4).innerHTML = jsonData[i].finish_time;
row.insertCell(5).innerHTML = jsonData[i].duration;
row.insertCell(6).innerHTML = jsonData[i].started_by;
}
// Display the table in the text area
var textArea = document.getElementById(‘textArea’);
textArea.value = table.outerHTML;
}
reader.readAsText(file);
}
// If the file is an Excel file
else if (file.type == ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’) {
// Read the file as a binary string
var reader = new FileReader();
reader.onload = function(e) {
// Parse the Excel data
var workbook = XLSX.read(e.target.result, {type: ‘binary’});
var sheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[sheetName];
var excelData = XLSX.utils.sheet_to_json(worksheet, {header:1});
// Create the table element
var table = document.getElementById(‘dataTable’);
// Create the table headers
var headers = excelData[0];
var headerRow = table.insertRow(0);
for (var i = 0; i < headers.length; i++) {
var cell = headerRow.insertCell(i);
cell.innerHTML = headers[i];
}
// Create the table rows
for (var i = 1; i <= 25 && i < excelData.length; i++) {
var row = table.insertRow(i);
for (var j = 0; j < headers.length; j++) {
table.rows[i].insertCell(j).innerHTML = excelData[i][j];
}
}
// Display the table in the text area
var textArea = document.getElementById(‘textArea’);
textArea.value = table.outerHTML;
}
reader.readAsBinaryString(file);
}
// If the file is neither a JSON nor an Excel file
else {
alert(‘Please select a JSON or an Excel file.’);
}
});
});
</script>
</head>
<body>
<h1>File Parser</h1>
<p>Select a JSON or an Excel file:</p>
<input type=”file” id=”fileInput”>
<table id=”dataTable”></table>
<p>Table HTML:</p>
<textarea id=”textArea” rows=”10″></textarea>
</body>
</html>