Charger CSV dans un tableau en JavaScript

1. Utilisez le plugin jQuery-csv pour charger CSV dans un tableau en JavaScript
2. Créer une fonction définie par l’utilisateur pour charger CSV dans un tableau en JavaScript

Un CSV est un fichier texte. Il sépare les différentes valeurs en utilisant une virgule comme délimiteur.

Nous allons charger un fichier CSV dans un tableau à l’aide de JavaScript dans cet article.

Utilisez le plugin jQuery-csv pour charger CSV dans un tableau en JavaScript

La bibliothèque jQuery fournit le plugin jquery-csv qui peut lire les fichiers CSV dans des tableaux.

Par exemple,

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

Nous pouvons définir un caractère délimiteur personnalisé et un séparateur en utilisant les propriétés delimiter et separator. Le résultat final est stocké dans un tableau.

Créer une fonction définie par l’utilisateur pour charger CSV dans un tableau en JavaScript

Nous utiliserons la classe FileReader pour lire le fichier CSV requis sous forme de chaîne. Pour stocker cela dans un tableau, nous utiliserons les fonctions slice(), split() et map(). La fonction slice() permet de retourner un nouveau tableau avec une partie d’un ancien tableau sur lequel il est implémenté. La fonction map() permet de renvoyer un nouveau tableau en fournissant les fonctions fournies sur chaque élément du tableau. Les fonctions split() aident à diviser les chaînes en sous-chaînes sous la forme d’un tableau à l’aide d’un séparateur spécifié.

Voir le code ci-dessous.

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;
}

Nous supposons que la première ligne du fichier contient les en-têtes. La fonction slice() commence du début au premier index \n et en utilisant la fonction split() pour diviser la chaîne en un tableau basé sur le délimiteur. De même, nous utilisons ces deux fonctions pour stocker les lignes. Ensuite, nous mappons les lignes à un tableau. Nous utilisons la fonction map() pour diviser chaque valeur d’une ligne dans un tableau. La fonction reduce() est utilisée avec les en-têtes pour créer un objet, ajouter les valeurs des lignes avec les en-têtes nécessaires et renvoyer cet objet. Cet objet est ajouté au tableau. Enfin, nous retournons le tableau final, qui est un tableau d’objets.