How to Export JSON to CSV File using JavaScript/JQuery?
Hi Artisan,
This example is focused on how to export json to csv using jquery. you can see how to convert json object to csv in javascript. you can understand a concept of jquery json to csv download. It's a simple example of how to export json to csv in javascript. So, let us dive into the details.
I will demonstrate how to export JSON data to a CSV file using jQuery. The process involves using Blob to create a CSV file in JavaScript. The code provided shows a simple way to convert JSON to CSV using JavaScript.
index.html
<!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? - ItSolutionStuff.com</title>
</head>
<body>
<h1>How to Convert JSON to CSV using JQuery? - ItSolutionStuff.com</h1>
<a id="createCSVFile" download="file.csv">Download</a>
</body>
<script type="text/javascript">
const data = [
{
"id": "1",
"name": "Hardik",
"email": "hardik@gmail.com",
},
{
"id": "2",
"name": "Harshad",
"email": "harshad@gmail.com",
},
{
"id": "3",
"name": "Vimal",
"email": "vimal@gmail.com",
}
];
const keys = Object.keys(data[0]);
const commaSeparatedString = [keys.join(",") , data.map(row => keys.map(key => row[key]).join(",")).join("\n")].join("\n");
const csvBlob = new Blob([commaSeparatedString]);
const createCSVFile = document.getElementById("createCSVFile");
createCSVFile.href = URL.createObjectURL(csvBlob);
</script>
</html>
You can run and check.
I hope it can help you...
