Converting dataset into proper CSV notation for downloading using JavaScript

Question

I currently have the following dataset:

this.set1 // == [111000, 111000, 110000, 110000, 109000]
this.set2 // == [2.073921204, 2.156188965, 2.210624695, 2.210624695, 2.286842346]
this.set3 // == [527.6497192, 522.3652954, 529.675415, 529.675415, 533.8148804]
this.set4 // == [530.6442261, 524.7432861, 532.2295532, 532.2295532, 536.545166]
this.set5 // == [80.73879242, 80.92513275, 80.95175934, 80.95175934, 80.79203796]

I tried the following code to convert this data to my needed CSV data:

// Reference to pulled-data arrays
let data = [
  this.set1
  this.set2
  this.set3
  this.set4
  this.set5
];

// Convert data arrays to CSV format
const CSVURL = 'data:text/csv;charset=UTF-8,';
let formattedData = data.map(e => e.join(',')).join('\n');
let encodedData = CSVURL + encodeURIComponent(formattedData);

// Generic download CSV function
downloadFile('name.csv', encodedData);

However, this outputted a CSV file of the following format:

How would I convert the data to this format for use in CSV?:

Edit: The similarities to the other post were only partial. See comments for full solution.

score 0 · Answer 1 · answered Jul 03 '19 at 15:51

You need just a small modification.

Please see the snippet below and comments in it:

this.set1 = [111000, 111000, 110000, 110000, 109000];
this.set2 = [2.073921204, 2.156188965, 2.210624695, 2.210624695, 2.286842346];
this.set3 = [527.6497192, 522.3652954, 529.675415, 529.675415, 533.8148804];
this.set4 = [530.6442261, 524.7432861, 532.2295532, 532.2295532, 536.545166];
this.set5 = [80.73879242, 80.92513275, 80.95175934, 80.95175934, 80.79203796];

// select headers of the CSV columns
const data = [
  ['set1', 'set2', 'set3', 'set4', 'set5']
];

// pull arrays by headers
data[0].forEach(h => data.push(this[h]));

// Convert data arrays to CSV format
const CSVURL = 'data:text/csv;charset=UTF-8,';
let formattedData = data.map(e => e.join(',')).join('\n');
let encodedData = CSVURL + encodeURIComponent(formattedData);

// Generic download CSV function
downloadFile('name.csv', encodedData);


function downloadFile(n, d) {
  const a = document.createElement('a');
  a.download = n;
  a.href = d;
  document.querySelector('body').appendChild(a);
  a.click();
}

I posted the solution that I ended up using, which also utilizes transposing the data. — About7Deaths, Jul 03 '19 at 16:06

score 0 · Accepted Answer · answered Jul 03 '19 at 16:03

Utilizing partial advice given by @Heretic Monkey (for transposing the data) and @codeWonderland (for adding category names), I have arrived at the following solution:

// Reference to pulled-data arrays
let data = [
  this.set1
  this.set2
  this.set3
  this.set4
  this.set5
];

// NEW
// Reference to data array names in same order as aforementioned data array
const dataNames = [
  'set1',
  'set2',
  'set3',
  'set4',
  'set5',
]

// NEW
// Add label to each column
data.forEach((datum, index) => {
  datum.unshift(dataNames[index]);
});

// Convert data arrays to CSV format
const CSVURL = 'data:text/csv;charset=UTF-8,';
let transposedData = data[0].map((col, i) => data.map(row => row[i])); // NEW: TRANSPOSE DATA
let formattedData = transposedData.map(e => e.join(',')).join('\n'); // Modified
let encodedData = CSVURL + encodeURIComponent(formattedData);

// Generic download CSV function
downloadFile('name.csv', encodedData);

Also noting the recent addition for alternative column labeling by @Kosh Very , quoted as:

// pull arrays by headers
data[0].forEach(h => data.push(this[h]));

score -1 · Answer 3 · answered Jul 03 '19 at 14:50

You could just add labels to each of them as the first element, this would get pulled as the title field.

// Reference to pulled-data arrays
let data = [
  this.set0
  this.set1
  this.set2
  this.set3
  this.set4
];

let i = 0
for (datum in data) {
    datum.unshift(`set${i}`);
}

// Convert data arrays to CSV format
const CSVURL = 'data:text/csv;charset=UTF-8,';
let formattedData = data.map(e => e.join(',')).join('\n');
let encodedData = CSVURL + encodeURIComponent(formattedData);

// Generic download CSV function
downloadFile('name.csv', encodedData);

Also, indexing starts with 0 ;3

Converting dataset into proper CSV notation for downloading using JavaScript

3 Answers3

Linked