CSV in Array laden in JavaScript

1. Verwenden Sie das Plugin jQuery-csv, um CSV in ein Array in JavaScript zu laden
2. Erstellen Sie eine benutzerdefinierte Funktion zum Laden von CSV in ein Array in JavaScript

Eine CSV ist eine Textdatei. Es trennt verschiedene Werte mit einem Komma als Trennzeichen.

In diesem Artikel werden wir eine CSV-Datei mit JavaScript in ein Array laden.

Verwenden Sie das Plugin jQuery-csv, um CSV in ein Array in JavaScript zu laden

Die jQuery-Bibliothek bietet das Plugin jquery-csv, das CSV-Dateien in Arrays einlesen kann.

Zum Beispiel,

array = $.csv.toArrays(csv, {
  delimiter: '\'',
  separator: ';',  // Sets a custom field separator character
});

Mit den Eigenschaften delimiter und separator können wir ein benutzerdefiniertes Trennzeichen und ein Trennzeichen setzen. Das Endergebnis wird in einem Array gespeichert.

Erstellen Sie eine benutzerdefinierte Funktion zum Laden von CSV in ein Array in JavaScript

Wir verwenden die Klasse FileReader, um die benötigte CSV-Datei als String zu lesen. Um dies in einem Array zu speichern, verwenden wir die Funktionen slice(), split() und map(). Die Funktion slice() hilft dabei, ein neues Array mit einem Teil eines alten Arrays zurückzugeben, auf dem es implementiert ist. Die Funktion map() hilft, ein neues Array zurückzugeben, indem sie die Funktionen bereitstellt, die für jedes Element im Array bereitgestellt werden. Die Funktionen split() helfen dabei, die Strings in Teilstrings in Form eines Arrays unter Verwendung eines angegebenen Trennzeichens aufzuteilen.

Siehe den Code unten.

function csv_To_Array(str, delimiter = ',') {
  const header_cols = str.slice(0, str.indexOf('\n')).split(delimiter);
  const row_data = str.slice(str.indexOf('\n') + 1).split('\n');
  const arr = row_data.map(function(row) {
    const values = row.split(delimiter);
    const el = header_cols.reduce(function(object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });

  // return the array
  return arr;
}

Wir gehen davon aus, dass die erste Zeile der Datei die Header enthält. Die Funktion slice() beginnt vom Anfang bis zum ersten \n-Index und verwendet die Funktion split(), um den String anhand des Trennzeichens in ein Array aufzuteilen. Ebenso verwenden wir diese beiden Funktionen, um die Zeilen zu speichern. Als nächstes ordnen wir die Zeilen einem Array zu. Wir verwenden die Funktion map(), um jeden Wert einer Zeile in ein Array aufzuteilen. Die Funktion reduce() wird mit den Headern verwendet, um ein Objekt zu erstellen, die Werte der Zeilen mit den erforderlichen Headern hinzuzufügen und dieses Objekt zurückzugeben. Dieses Objekt wird dem Array hinzugefügt. Schließlich geben wir das letzte Array zurück, das ein Array von Objekten ist.