Угловая загрузка 2 парс CSV - PullRequest
Новая
       13

Угловая загрузка 2 парс CSV

0 голосов
/ 27 июня 2018

Я новичок в Angular и пытаюсь создать функцию загрузки и регистрации контента в файлах CSV.

Это выглядит следующим образом:

parts.component.html 

<div class="well">
  <form>
    <div class="row">
      <div class="col-md-10">
        <input class="form-control" id="file" name="file" (change)="readCsvData($event)" type="file" accept="text/plain">
      </div>
      <div class="col-md-2">
        <button class="btn btn-success" type="submit">Enviar arquivo</button>
      </div>
    </div>
  </form>
</div>

parts.component.ts 

readCsvData(){
  let csvUrl = event.target;
  this.partService.upload(csvUrl)
}

part.service.ts 

public upload(input: any){
    let url = this.partsUrl;
    let body = this.extractData(input);
    console.log(body);
    // return this.http.post()
  }
public extractData(data: any) {
    const file = data.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
      const content = reader.result;
      var lines = content.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);
      }
      JSON.stringify(result);
    }
    reader.readAsText(file);
 }

Но моя функция Upload возвращает только Undefined в теле varable, хотя на самом деле она должна возвращать массив объектов из функции extractData.

Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Аналогично ответу Роба, но не используйте сторонние пакеты для простых строковых операций: 

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

processCsv(content){
    content.split('\n');
    // other sorts of magic
}

convertFile(event: any) {
  const file = event.target.files[0];
  readFileContent(file).then(content => {
    console.log('This is your file as string: ', content);
    // Operate your string as required in a separate function
    this.processCsv(content)    
  }).catch(error => console.log(error))
}

readFileContent(file) {
    const reader = new FileReader()
    return new Promise((resolve, reject) => {
    reader.onload = event => resolve(event.target.result)
    reader.onerror = error => reject(error)
    reader.readAsText(file)
  })
}
0 голосов
/ 29 июня 2018

попробуйте заглянуть в этот пакет npm csvtojson

также, если вы используете angular, вы должны использовать const и let, старайтесь не использовать var.

вот как я это использовал 

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

convertFile(event: any) {
  this.file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsText(this.file);
  reader.onload = () => {
    this.textToCsv(reader.result);
  };
}

https://github.com/Robbie106gti/nc-catalog/blob/master/src/sop/components/csvtojson/csvtojson.component.ts

...