web-dev-qa-db-de.com

CSV zu JSON in Typescript

Ich versuche, eine JSON-Datei aus den Daten zu erstellen, die von einer CSV-Datei empfangen wurden, die mit einer Datei-Uploader-Eingabe hochgeladen wurde.

Ich habe viele Einträge gefunden, die dies in Javascript tun, aber sie funktionieren für mich in TypeScript nicht ganz.

Der Fehler, den ich bekomme, wenn der folgende Code ausgeführt wird, ist csv.Split ist keine Funktion. Hat jemand eine Idee, wie ich meinen Code ändern kann? 

Lassen Sie mich wissen, wenn Sie weitere Informationen benötigen, und vielen Dank im Voraus.

component.ts 

public testFile() {
    var file = (<HTMLInputElement>document.getElementById('fileInput')).files[0];        

    var jsonFile = this.csvJSON(file);


    // Set Http POST options
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    // Call Api with test connection data 
    this.http
        .post('/api/TestConnection/TestConnection', jsonFile, options)
        .subscribe(data => {
            // alert request ok
            alert('ok');
        }, error => {
            // Log error
            console.log(error.json());
        });
}

public csvJSON(csv) {
    var lines = csv.split("\n");

    var result = [];

    var headers = lines[0].split(",");

    for (var i = 1; i < lines.length; i++) {

        var obj = {};
        var currentline = lines[i].split(",");

        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
        }

        result.Push(obj);

    }

    //return result; //JavaScript object
    return JSON.stringify(result); //JSON
}
jsonfilecsvangulartypescript
8
Toby Jackson

Sie übergeben die Methode File an csvJSON anstelle des Dateitexts. Sie können FileReader verwenden, um den Inhalt zu lesen. Hier ist ein Beispiel

const convertFile = () => {
  const input = document.getElementById('fileInput');

  const reader = new FileReader();
  reader.onload = () => {
    let text = reader.result;
    console.log('CSV: ', text.substring(0, 100) + '...');
    
    //convert text to json here
    //var json = this.csvJSON(text);
  };
  reader.readAsText(input.files[0]);
};
<input type='file' onchange='convertFile(event)' id='fileInput'>
9
Aleksey L.

HTML

<input type="file" accept=".csv (change)="csv2Array($event)">

TypeScript 

csv2Array(fileInput: any){
//read file from input
this.fileReaded = fileInput.target.files[0];

let reader: FileReader = new FileReader();
reader.readAsText(this.fileReaded);

 reader.onload = (e) => {
 let csv: string = reader.result;
 let allTextLines = csv.split(/\r|\n|\r/);
 let headers = allTextLines[0].split(',');
 let lines = [];

  for (let i = 0; i < allTextLines.length; i++) {
    // split content based on comma
    let data = allTextLines[i].split(',');
    if (data.length === headers.length) {
      let tarr = [];
      for (let j = 0; j < headers.length; j++) {
        tarr.Push(data[j]);
      }

     // log each row to see output 
     console.log(tarr);
     lines.Push(tarr);
  }
 }
 // all rows in the csv file 
 console.log(">>>>>>>>>>>>>>>>>", lines);
} 
}
1
Mahendra Waykos