How can I convert an array of objects to a CSV file in JavaScript?
Richard W
richard w profile pic

To convert an array of objects to a CSV file in JavaScript, you can follow these steps: 1. Define your array of objects:

1
2
3
4
5
6
7

   const data = [
     { name: "John", age: 30, city: "New York" },
     { name: "Alice", age: 25, city: "London" },
     { name: "Bob", age: 35, city: "Paris" }
   ];
   

Replace thedata array with your own array of objects. 2. Define a function to convert an object to a CSV row:

1
2
3
4
5
6
7
8
9
10
11
12

   function convertToCSV(obj) {
     const values = Object.values(obj);
     const escapedValues = values.map(value => {
       if (typeof value === "string") {
         return `"${value.replace(/"/g, '""')}"`;
       }
       return value;
     });
     return escapedValues.join(",");
   }
   

This function takes an object as input, retrieves its values usingObject.values(), and escapes any double quotes within string values. It then joins the values with commas to create a CSV row. 3. Convert the array of objects to a CSV string:

1
2
3
4

   const csvArray = data.map(obj => convertToCSV(obj));
   const csvString = csvArray.join("\n");
   

Themap() method callsconvertToCSV() on each object in thedata array to convert them to CSV rows. The resulting CSV rows are then joined with newlines to create a CSV string. 4. Create a Blob object from the CSV string:

1
2
3

   const blob = new Blob([csvString], { type: "text/csv;charset=utf-8" });
   

TheBlob object represents the CSV data. It is created with thecsvString as the content and the specified MIME type. 5. Generate a download link for the CSV file:

1
2
3
4
5
6
7

   const url = URL.createObjectURL(blob);
   const link = document.createElement("a");
   link.href = url;
   link.download = "data.csv";
   link.click();
   

This code creates a download link for the CSV file. The link'shref is set to the URL generated from theBlob object. Thedownload attribute specifies the filename. Finally, the link is programmatically clicked, triggering the download. By following these steps, you can convert an array of objects to a CSV file and initiate its download. Adjust the code as needed to fit your specific requirements or to handle additional formatting or data transformations.