How to Export JSON to CSV File using JavaScript/JQuery

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.