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:
