How to implement json2csv in Angular 2 - json

Question

How to implement json2csv in angular 2 using typescript?(https://www.npmjs.com/package/json2csv). Is there any other better approach.

Answer 1

This may not be based on the original (I haven't checked), but:
https://www.npmjs.com/package/angular2-json2csv
The readme says it should be used as a service, but it can also be used as a plain class, eg:
let csv = new CSVService();
It has its faults though:
If you have an array of objects that are similar, but not all have a value for every single property, the column headers will be missing for those properties.
It doesn't allow you to exclude columns, which may or may not be desired.
Edit:
I've come up with an alternative, which accounts for items with more properties than the others. Use or modify as you wish:
export class JSONToCSV {
private AddValue(Row: string, Value: string) {
let Comma: string = ',';
if (Row === '')
Comma = '';
return Row + Comma + Value;
}
private GetHeader(Item: any) {
let Row: string = '';
for (var Key in Item) {
Row = this.AddValue(Row, Key);
}
return Row + '\r\n';
}
private GetRow(Item: any) {
let Row: string = '';
for (var Key in Item) {
Row = this.AddValue(Row, Item[Key]);
}
return Row + '\r\n';
}
private GetPropCount(Item: any) {
return Object.keys(Item).length;
}
public Convert(Data: any, Filename: string) {
let CSV: string = '';
let ColumnsObject: any = null;
for (var Item of Data) {
if ((ColumnsObject == null) || (this.GetPropCount(Item) > this.GetPropCount(ColumnsObject))) {
ColumnsObject = Item;
}
CSV = CSV + this.GetRow(Item);
}
CSV = this.GetHeader(ColumnsObject) + CSV;
let CSVBlob = new Blob([CSV], { type: 'text/csv' });
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(CSVBlob, Filename);
} else {
// window.open(URL.createObjectURL(CSVBlob));
let url= window.URL.createObjectURL(CSVBlob);
let Anchor: any = document.createElement('a');
Anchor.setAttribute('style', 'display:none;');
document.body.appendChild(Anchor);
Anchor.href = url;
Anchor.download = Filename;
Anchor.click();
}
}
}

Answer 2

#dave-notage response works with Chrome, but not with Firefox.
Here is a working implementation:
<a [download]="csvFileName" [href]="getCSVDownloadLink()">CSV export</a>
import { Component } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
import * as json2csv from 'json2csv';
#Component({
selector: 'csv-download',
templateUrl: './csv-download.component.html',
styleUrls: ['./csv-download.component.scss']
})
export class CsvDownloadComponent {
public csvFileName = `test.csv`;
private SOME_DATA: any[] = [{id: 1, name: 'Peter'}, {id: 2, name: 'Sarah'}];
constructor(
private domSanitizer: DomSanitizer,
) { }
getCSVDownloadLink() {
return this.generateCSVDownloadLink({
filename: this.csvFileName,
data: this.SOME_DATA,
columns: [
'id',
'name',
],
});
}
// you can move this method to a service
public generateCSVDownloadLink(options: { filename: string, data: any[], columns: string[] }): SafeUrl {
const fields = options.columns;
const opts = { fields, output: options.filename };
const csv = json2csv.parse(options.data, opts);
return this.domSanitizer.bypassSecurityTrustUrl('data:text/csv,' + encodeURIComponent(csv));
}
}