JSON to CSV Tool with colorful styling
February 03, 2024
0
document.write('JSON to CSV Tool
try {
const jsonData = JSON.parse(jsonInput);
const csvData = jsonToCSV(jsonData);
displayCSV(csvData);
} catch (error) {
alert('Invalid JSON format. Please check your input.');
}
}
function jsonToCSV(jsonData) {
const csvRows = [];
const headers = Object.keys(jsonData[0]);
csvRows.push(headers.join(','));
for (const row of jsonData) {
const values = headers.map(header => row[header]);
csvRows.push(values.join(','));
}
return csvRows.join('\n');
}
function displayCSV(csvData) {
const outputContainer = document.getElementById('output');
const csvTable = document.getElementById('csvTable');
// Clear previous content
csvTable.innerHTML = '';
// Display CSV table
const rows = csvData.split('\n');
for (const row of rows) {
const cells = row.split(',');
const tr = document.createElement('tr');
for (const cell of cells) {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
}
csvTable.appendChild(tr);
}
// Show output container
outputContainer.style.display = 'block';
}
