How to Convert CSV to JSON file and vice-versa in JavaScript ?

CSV files are a common file format used to store data in a table-like manner. They can be particularly useful when a user intends to download structured information in a way that they can easily open and read on their local machine. CSV files are ideal for this because of their portability and universality.

In this article, we will explain how to convert JavaScript objects JSON to the CSV file format and vice-versa. This code does not use any external libraries, and thus it works on both the browser and Node.js.

Converting From JSON To CSV

To convert from JSON to CSV, we first need to identify the headers of the CSV file. To do this, let’s get a list of keys present in each of the JavaScript objects that has been passed in. To get this list of keys, use the `Object.keys()` method.

Javascript

<script>
    const JSONToCSV = (objArray, keys) => {
        let csv = keys.join(',');
        objArray.forEach((row) => {
            let values = [];
            keys.forEach((key) => {
                values.push(row[key] || '');
            });
            csv += '\n' + values.join(',');
        });
        return csv;
    };

    const exampleJSON = [
        {
            "date": 20210307,
            "positives": 28756184,
            "fatalities": 515148
        },
        {
            "date": 20210306,
            "positives": 28714654,
            "fatalities": 514309
        },
        {
            "date": 20210305,
            "positives": 28654639,
            "fatalities": 512629
        },
        {
            "date": 20210304,
            "positives": 28585852,
            "fatalities": 510408
        },
        {
            "date": 20210303,
            "positives": 28520365,
            "fatalities": 508665
        },
        {
            "date": 20210302,
            "positives": 28453529,
            "fatalities": 506216
        },
        {
            "date": 20210301,
            "positives": 28399281,
            "fatalities": 504488
        }
    ];
    console.log(JSONToCSV(exampleJSON,
        ['date', 'positives', 'fatalities']));
</script>

This code can be simplified to:

Javascript

<script>
    const JSONToCSV = (objArray, keys) => [
        keys.join(','), ...objArray.map(
            row => keys.map(k => row[k] || '')
                .join(','))].join('\n');

    const exampleJSON = [
        {
            "date": 20210307,
            "positives": 28756184,
            "fatalities": 515148
        },
        {
            "date": 20210306,
            "positives": 28714654,
            "fatalities": 514309
        },
        {
            "date": 20210305,
            "positives": 28654639,
            "fatalities": 512629
        },
        {
            "date": 20210304,
            "positives": 28585852,
            "fatalities": 510408
        },
        {
            "date": 20210303,
            "positives": 28520365,
            "fatalities": 508665
        },
        {
            "date": 20210302,
            "positives": 28453529,
            "fatalities": 506216
        },
        {
            "date": 20210301,
            "positives": 28399281,
            "fatalities": 504488
        }
    ];
    console.log(JSONToCSV(exampleJSON,
        ['date', 'positives', 'fatalities']));
</script>

Output:

date, positives, fatalities
20210307, 28756184, 515148
20210306, 28714654, 514309
20210305, 28654639, 512629
20210304, 28585852, 510408
20210303, 28520365, 508665
20210302, 28453529, 506216
20210301, 28399281, 504488

Converting From CSV To JSON

To convert from CSV to JSON, first identify a list of keys for each JavaScript object by parsing the CSV headers, then add each key and value to a new object for each CSV row.

Javascript

<script>
    const CSVToJSON = csv => {
        const lines = csv.split('\n');
        const keys = lines[0].split(',');
        return lines.slice(1).map(line => {
            return line.split(',').reduce((acc, cur, i) => {
                const toAdd = {};
                toAdd[keys[i]] = cur;
                return { ...acc, ...toAdd };
            }, {});
        });
    };

    const exampleCSV = `
            date,positives,fatalities
            20210307,28756184,515148
            20210306,28714654,514309
            20210305,28654639,512629
            20210304,28585852,510408
            20210303,28520365,508665
            20210302,28453529,506216
            20210301,28399281,504488`;
    console.log(CSVToJSON(exampleCSV));
</script>

Output: