How to Export JSON to CSV File using JavaScript/JQuery?

By Hardik Savani July 29, 2023 Category : 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

Read Also: How to Install JQuery in Laravel Vite?
<!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...

Tags :
Previous

Laravel PayPal Send Payment to Email Example
Next

How to Upgrade from Ubuntu 22.04 to Ubuntu 23.04?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares