Create a CSV file from JSON object using Javascript in the browser

Last updated on January 31, 2021

In this post, we gonna convert JSON object data into a CSV file using JavaScript in the browser and will make it downloadable.

We gonna use the browser’s URL interface and Blob objects to convert JSON data into a CSV file without a backend interface.

Let’s get started:

Here is the data

const data = [
            {
                "model": "Samsung S7",
                "chargers": "55",
                "cases": "56",
                "earphones": "57",
                "scratched": "2"
            },
            {
                "model": "Pixel XL",
                "chargers": "77",
                "cases": "78",
                "earphones": "79",
                "scratched": "4"
            },
            {
                "model": "iPhone 7",
                "chargers": "88",
                "cases": "89",
                "earphones": "90",
                "scratched": "6"
            }
        ];

Next, we have to convert this data into a comma-separated string. We gonna use object.keys the method to get keys from the input JSON data and we will use these keys as headers for the CSV file. And Convert remaining data to a comma-separated string with a new line charter separating each object.

 // get keys as array
 const keys = Object.keys(data[0]);

 const commaSeparatedString = [keys.join(",") , data.map(row => keys.map(key => row[key]).join(",")).join("\n")].join("\n")

Pass this data to Blob and create a Blob object. Pass this object to the URL interface and create a link to the file:

const csvBlob = new Blob([commaSeparatedString])
const url = URL.createObjectURL(csvBlob)

Full Code to convert JSON data to CSV.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Generating a downloadable CSV file in the browser.
    </title>
  </head>
  <body>
    <h1>Generating a downloadable CSV file in the browser.</h1>

    <a id="a2" download="file.csv">Download</a>
   
    <script>
        const data = [
            {
                "model": "Samsung S7",
                "chargers": "55",
                "cases": "56",
                "earphones": "57",
                "scratched": "2"
            },
            {
                "model": "Pixel XL",
                "chargers": "77",
                "cases": "78",
                "earphones": "79",
                "scratched": "4"
            },
            {
                "model": "iPhone 7",
                "chargers": "88",
                "cases": "89",
                "earphones": "90",
                "scratched": "6"
            }
        ];

        // get keys as array
        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 a2 = document.getElementById("a2")
    
        a2.href = URL.createObjectURL(csvBlob)
    
    </script>
  </body>
</html>

Create a CSV file from JSON object using Javascript in the browser

Full Code to convert JSON data to CSV.

Related tutoirals