Javascript membaca file csv baris demi baris

Membaca data dari sumber data sangat umum saat membangun aplikasi web. CSV adalah yang paling populer di antara banyak sumber data karena betapa mudahnya data diformat di dalamnya, membuatnya mudah untuk mengurai file-file ini

Dalam tutorial ini, kita akan melihat cara membaca konten file CSV dan kemudian mengurai kontennya untuk digunakan lebih lanjut dalam aplikasi

Kumpulan data yang akan digunakan

Untuk tutorialnya, kita membutuhkan file sampel dengan data. Saya menemukan file CSV yang berisi kota-kota di dunia. Anda dapat mengunduh file ini di tautan ini

Mari buka file sampel dan lihat apa yang ada di dalamnya

Jadi di sini, tujuan kita adalah membaca data ini dan mengonversinya menjadi objek TypeScript untuk digunakan di dalam aplikasi, seperti menyimpan di database atau mengembalikannya sebagai respons JSON

Berdasarkan gambar di bawah ini, kita akan memiliki tipe yang mirip dengan ini

type WorldCity = {
    name: string;
    country: string;
    subCountry: string;
    geoNamId: number;
};

Siapkan proyek

Inisialisasi sebuah Node. proyek js dan juga TypeScript

mkdir node-csv-read

cd node-csv-read

yarn init -y

yarn add -D typescript ts-node @types/node

yarn tsc --init

touch index.ts

Instal paket Node yang akan digunakan untuk membaca file bernama csv-parse

yarn add csv-parse

Di dalam file index. ts, tambahkan kode berikut

import * as fs from "fs";
import * as path from "path";
import { parse } from 'csv-parse';

type WorldCity = {
  name: string;
  country: string;
  subCountry: string;
  geoNameId: number;
};

(() => {
  const csvFilePath = path.resolve(__dirname, 'files/world-cities_csv.csv');

  const headers = ['name', 'country', 'subCountry', 'geoNameId'];

  const fileContent = fs.readFileSync(csvFilePath, { encoding: 'utf-8' });

  parse(fileContent, {
    delimiter: ',',
    columns: headers,
  }, (error, result: WorldCity[]) => {
    if (error) {
      console.error(error);
    }

    console.log("Result", result);
  });
})();

Di sini, pertama-tama kita menentukan jalur tempat file yang akan dibaca berada;

Kami membaca konten file dan menggunakan fungsi parse()_ dari csv-parse untuk mengurai string dan mengembalikan hasilnya sebagai array item dari tipe WorldCity

Kami juga menambahkan dua opsi untuk menentukan

mkdir node-csv-read

cd node-csv-read

yarn init -y

yarn add -D typescript ts-node @types/node

yarn tsc --init

touch index.ts

Mari kita coba jalankan aplikasinya untuk melihat hasilnya

yarn ts-node index.ts

Kami mendapat output yang mirip dengan ini

Terapkan transformasi pada penguraian

Pada konten yang dicetak di keluaran, kita melihat

mkdir node-csv-read

cd node-csv-read

yarn init -y

yarn add -D typescript ts-node @types/node

yarn tsc --init

touch index.ts

Csv-parse menyediakan opsi yang disebut

mkdir node-csv-read

cd node-csv-read

yarn init -y

yarn add -D typescript ts-node @types/node

yarn tsc --init

touch index.ts

parse(fileContent, {
    delimiter: ',',
    columns: headers,
    fromLine: 2,
    cast: (columnValue, context) => {
      if (context.column === 'geoNameId') {
        return parseInt(columnValue, 10);
      }

      return columnValue;
    }
  }, (error, result: WorldCity[]) => {
    if (error) {
      console.error(error);
    }

    console.log("Result", result);
  });

Kami memeriksa apakah nama kolom adalah

mkdir node-csv-read

cd node-csv-read

yarn init -y

yarn add -D typescript ts-node @types/node

yarn tsc --init

touch index.ts

Kami menambahkan opsi baru yang disebut

mkdir node-csv-read

cd node-csv-read

yarn init -y

yarn add -D typescript ts-node @types/node

yarn tsc --init

touch index.ts

Nomor tersebut sekarang diuraikan seperti yang diharapkan

Ambil baris tertentu dalam data CSV

Katakanlah kita ingin mengambil kota dari Prancis saja. Bagaimana kita bisa melakukan itu? . Fungsi  parse sekarang terlihat seperti ini

parse(fileContent, {
    delimiter: ',',
    columns: headers,
    fromLine: 2,
    cast: (columnValue, context) => {
      if (context.column === 'geoNameId') {
        return parseInt(columnValue, 10);
      }

      return columnValue;
    },
    on_record: (line, context) => {
      if (line.country !== 'France') {
        return;
      }

      return line;
    },
  }, (error, result: WorldCity[]) => {
    if (error) {
      console.error(error);
    }

    console.log("Result", result);
  });

Jalankan kodenya dan lihat hasilnya

Kita bisa melihat jumlah item yang diambil turun drastis

Bungkus

Kami melihat cara membaca file CSV menggunakan pustaka csv-parse, yang menyediakan banyak opsi yang memberi kami lebih banyak fleksibilitas dalam cara kami mengurai file. csv-parse memiliki banyak opsi lain dan jika Anda ingin mempelajarinya lebih lanjut, lihat tautan ini

Anda dapat menemukan sumber kode di repositori GitHub

Ikuti saya di Twitter atau berlangganan buletin saya untuk tidak ketinggalan posting mendatang dan tip dan trik yang saya bagikan setiap minggu

Bagaimana cara membaca file CSV dalam JavaScript baris demi baris?

Bagaimana cara membaca file CSV baris demi baris di NodeJS?

Bisakah JavaScript mengurai CSV?

Bagaimana cara membaca dan menulis file CSV di JavaScript?