Export JSON to CSV File Using JavaScript and jQuery
In this tutorial, we’ll show you how to export JSON data to a CSV file using jQuery. We’ll break down the process of converting a JSON object to CSV format and demonstrate how to download it using a straightforward JavaScript method.
We’ll use the Blob API to create the CSV file and make it available for download. This guide will provide you with a clear and simple example of converting JSON to CSV with JavaScript, making it easy to integrate into your projects.
Let’s dive into the details and get started!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Convert JSON to CSV using jQuery? - thefullstackcode.com</title>
</head>
<body>
<h1>How to Convert JSON to CSV using jQuery? - thefullstackcode.com</h1>
<a id="createCSVFile" download="file.csv">Download</a>
<script type="text/javascript">
const data = [
{ "id": "1", "name": "RAJ KAPOOR", "email": "raj@gmail.com" },
{ "id": "2", "name": "RISHI KAPOOR", "email": "rishi@gmail.com" },
{ "id": "3", "name": "RANBIR KAPOOR", "email": "ranbir@gmail.com" }
];
const keys = Object.keys(data[0]);
const csvContent = [
keys.join(","),
...data.map(row => keys.map(key => `"${row[key]}"`).join(","))
].join("\n");
const csvBlob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const createCSVFile = document.getElementById("createCSVFile");
createCSVFile.href = URL.createObjectURL(csvBlob);
</script>
</body>
</html>
Conclusion :
This updated code offers a reliable way to convert JSON data into a CSV file, taking care of special characters and working smoothly across various browsers. The approach is straightforward and practical, making it a great addition to any web project. You’ll find it easy to implement, and it’s a handy tool for handling data exports effectively.
