Импортируйте столбец спецификаций c из данных CSV, используя Papa Parse с Ioni c 4

Question

У меня есть код, который загружает данные CSV в мое приложение Ioni c 4, используя плагин Papa Parse, но я хочу добавить определенные c поля данных - не совсем уверен, как их получить.

Например, что если я хотел бы отображать только «Имя» и «Фамилия» вместо всех полей?

dummyData.csv

Date,"First Name","Last Name","Email","Amount","Currency","InvoiceID","Country"
08.22.2019,"Simon","Grimm","saimon@devdactic.com","50,00","EUR","0001","GER"
08.21.2019,"Simon","Grimm","saimon@devdactic.com","45,00","EUR","0002","GER"
08.19.2019,"Simon","Grimm","saimon@devdactic.com","40,00","EUR","0003","GER"
08.18.2019,"Simon","Grimm","saimon@devdactic.com","35,00","EUR","0004","GER"
08.17.2019,"Simon","Grimm","saimon@devdactic.com","30,00","EUR","0005","GER"
08.16.2019,"Simon","Grimm","saimon@devdactic.com","25,00","EUR","0006","GER"

Страница скрипта TS

import { Component, OnInit } from '@angular/core';
import { Papa } from 'ngx-papaparse';
import { Platform } from '@ionic/angular';
import { File } from '@ionic-native/file/ngx';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-examination-test',
  templateUrl: './examination-test.page.html',
  styleUrls: ['./examination-test.page.scss'],
})

export class  ExaminationTestPage {
  csvData: any[] = [];
  headerRow: any[] = [];

  constructor(
    private http: HttpClient,
    private papa: Papa,
    private plt: Platform,
    private file: File,
    private socialSharing: SocialSharing,
  ) {
    this.loadCSV();
  }

  private loadCSV() {
    this.http
      .get('./assets/Sins.csv', {
        responseType: 'text'
      })
      .subscribe(
        data => this.extractData(data),
        err => console.log('something went wrong: ', err)
      );
  }

  private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = parsedData.data;
      }
    });
  }

  exportCSV() {
    let csv = this.papa.unparse({
      fields: this.headerRow,
      data: this.csvData
    });

    if (this.plt.is('cordova')) {
      this.file.writeFile(this.file.dataDirectory, 'Sins.csv', csv, {replace: true}).then( res => {
        this.socialSharing.share(null, null, res.nativeURL, null).then(e =>{
          // Success
        }).catch(e =>{
          console.log('Share failed:', e)
        });
      }, err => {
        console.log('Error: ', err);
      });

    } else {
      // Dummy implementation for Desktop download purpose
      var blob = new Blob([csv]);
      var a = window.document.createElement('a');
      a.href = window.URL.createObjectURL(blob);
      a.download = 'newdata.csv';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  }

  trackByFn(index: any, item: any) {
    return index;
  }
}

HTML Скрипт

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Devdactic CSV
    </ion-title>
    <ion-buttons slot="start">
      <ion-button (click)="exportCSV()">
        Export
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content scrollX="true">
  <table border="1" class="data-table">
    <tbody>
      <tr>
        <td *ngFor="let header of headerRow" text-center>
          <b>{{ header }}</b>
        </td>
      </tr>
      <tr *ngFor="let row of csvData; let i = index">
        <td
          *ngFor="let data of row; let j = index; trackBy: trackByFn"
          class="data-col"
        >
          <ion-input type="text" [(ngModel)]="csvData[i][j]"></ion-input>
        </td>
      </tr>
    </tbody>
  </table>
</ion-content>

Answer 1

После проверки того, что:

private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = parsedData.data;
      }
    });
  }

оставляет вас для результата, кажется, что он оставляет вас с каждой строкой в ​​качестве записи массива.

Что бы я сделал, это две вещи, в зависимости от ситуации, но это предполагает, что CSV всегда заканчиваются одинаковыми 8 столбцами каждый раз. Сначала интерфейс:

interface InvoiceDetails {
date: moment();
firstName: string; 
lastName: string;
email: string;`enter code here`
amount: number;
currency: string
invoiceId: string;
country: string;
}

, затем для удобства добавлю перечисление:

enum Column {
Date = 0,
FirstName = 1,
LastName = 2,
Email = 3,
Amount = 4,
Currency = 5,
InvoiceID = 6,
Country = 7
}

Затем я добавлю в ваш метод extractData метод:

  private extractData(res) {
    let csvData = res || '';

    this.papa.parse(csvData, {
      complete: parsedData => {
        this.headerRow = parsedData.data.splice(0, 1)[0];
        this.csvData = this.remapToInvoiceDetails(parsedData.data);
      }
    });
  }

Тогда remapToInvoiceDetails будет выглядеть примерно так:

remapToInvoiceDetails(csvData: string[]) {
 const invoices: InvoiceDetails[] = [];
 for (const data of csvData) {
  invoices.push({
   date: data[Column .Date],
   firstname: data[Column .FirstName],
   lastName: data[Column .LastName],
   email: data[Column .Email],
   amount: data[Column .Amount],
   currency:  data[Column .Currency],
   invoiceID: data[Column .InvoiceID],
   country: data[Column .Country],
   });
  }
 return invoices;
 }

Делая это, вы получаете данные в структуре, которая позволяет вам использовать intellisense, и вы можете легче выбрать желаемое свойство. То есть, учитывая, что вы теперь определяете csvData следующим образом:

csvData: Invoices[] = [];   

, но тогда я бы просто назвал это счетами или более подходящим именем, поскольку теперь оно структурировано. Обратите внимание, что вы всегда получаете 8 столбцов, и нет нулевых проверок, поэтому их также необходимо добавить.