How to Export JSON to CSV File using JavaScript/JQuery

AuthorSumit Dey Sarkar

Pubish Date01 Oct 2023


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


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 = => row[key]);

  // 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); = 'data.csv';

  // Trigger the download = 'none';

  // Clean up

// 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


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.

Comments 0

Leave a comment