Mon -
Sun 8.00 AM - 8.00 PM
JavaScript
)
In this tutorial we will learn how to export JSON to CSV file using JavaScript/JQuery.
How to export JSON to CSV file using JavaScript/JQuery
We can export JSON data to a CSV file using JavaScript or jQuery by following below steps:
Step 1 - Create your JSON data:
Make sure you have your JSON data ready. You can either have it as an object or as a string.
Step 2 - Convert JSON to CSV format:
You'll need to convert your JSON data into CSV format. You can do this by iterating through the JSON data and building a CSV string.
Step 3 - Create a CSV file:
Once you have the CSV data, you can create a CSV file using the Blob in JavaScript.
Step 4 - Trigger the download:
Finally, you can trigger the download of the CSV file using the download attribute and a hidden anchor (<a>) element.
Example of export JSON to a CSV file:
function JSONToCSV(jsonData) {
// Convert JSON to CSV format
const csvData = [];
const header = Object.keys(jsonData[0]);
csvData.push(header.join(',')); // Header row
jsonData.forEach((row) => {
const values = header.map((key) => row[key]);
csvData.push(values.join(','));
});
// Create a Blob object containing the CSV data
const blob = new Blob([csvData.join('\n')], { type: 'text/csv' });
// Create a temporary anchor element to trigger the download
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'data.csv';
// Trigger the download
a.style.display = 'none';
document.body.appendChild(a);
a.click();
// Clean up
document.body.removeChild(a);
}
// Example JSON data
const jsonData = [
{ Name: 'John', Age: 30, City: 'New York' },
{ Name: 'Alice', Age: 25, City: 'San Francisco' },
{ Name: 'Bob', Age: 35, City: 'Los Angeles' },
];
// Call the function to export JSON to CSV
JSONToCSV(jsonData);
This code defines a function JSONToCSV that takes JSON data as input and exports it to a CSV file. Replace the jsonData variable with your own JSON data.
Make sure to include this code within a script tag in your HTML file, or in a JavaScript file linked to your HTML document. When you run this code, it will trigger the download of a CSV file containing your JSON data.