Data Science For Beginner | Cara Membaca CSV File Menggunakan JavaScript
Jika pada tutorial sebelumnya kita telah mempelajari tentang cara membaca file CSV menggunakan Python, pada tutorial kali ini kita akan coba untuk membaca file CSV menggunakan JavaScript.
Meskipun terdengar sedikit memaksakan, why not?
Cara Membaca File CSV Menggunakan JavaScript
Untuk membaca file CSV menggunakan JavaScript, kita dapat mengikuti langkah-langkah berikut:
- Buatlah file CSV yang akan dibaca. Contohnya, buatlah file bernama "data.csv" dengan isi sebagai berikut:
Nama,Usia,Kota
John,25,New York
Sarah,30,Chicago
Peter,40,San Francisco
- Buat file HTML dengan script JavaScript. Buatlah file HTML bernama "index.html" dengan struktur sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Read CSV using JavaScript</title>
</head>
<body>
<table id="data-table">
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="read-csv.js"></script>
</body>
</html>
- Buatlah file JavaScript yang akan membaca file CSV. Buatlah file JavaScript bernama "read-csv.js" dengan isi sebagai berikut:
// membuat objek XMLHttpRequest
let xhr = new XMLHttpRequest();
// membuat GET request ke file CSV
xhr.open('GET', 'data.csv', true);
// mengatur tipe respon yang diharapkan
xhr.responseType = 'text';
// menangani ketika respon diterima
xhr.onload = function() {
if (xhr.status === 200) {
// memisahkan baris pada file CSV
let rows = xhr.responseText.split('\n');
// mengisi tabel dengan data dari file CSV
let table = document.getElementById('data-table').getElementsByTagName('tbody')[0];
for (let i = 1; i < rows.length; i++) {
let cells = rows[i].split(',');
let row = table.insertRow();
for (let j = 0; j < cells.length; j++) {
let cell = row.insertCell();
cell.innerHTML = cells[j];
}
}
} else {
console.log('Gagal memuat file CSV');
}
};
// menangani ketika terjadi error
xhr.onerror = function() {
console.log('Terjadi error saat memuat file CSV');
};
// mengirimkan request
xhr.send();
- Jalankan file HTML. Buka file "index.html" pada web browser, dan data pada file CSV akan ditampilkan dalam tabel.
Catatan: Kita perlu menjalankan file HTML pada server lokal (misalnya menggunakan XAMPP atau WAMP) agar file CSV dapat diakses oleh JavaScript.
Output
Output dari tutorial di atas adalah sebuah tabel yang berisi data dari file CSV yang telah dibaca menggunakan JavaScript. Tabel ini akan ditampilkan pada halaman web saat file HTML dijalankan. Berikut adalah contoh tampilan tabel yang dihasilkan dari file CSV pada tutorial di atas:
| Nama | Usia | Kota |
|-------|------|----------------|
| John | 25 | New York |
| Sarah | 30 | Chicago |
| Peter | 40 | San Francisco |
Tabel tersebut menampilkan data dari tiga baris pada file CSV, yaitu "John", "Sarah", dan "Peter", dengan masing-masing kolom "Nama", "Usia", dan "Kota".
Bagaimana? Cukup simple bukan?
Jangan lupa baca juga beberapa tutorial menarik lainnya di bawah ini:
Dapatkan Tutorial Exclusive Via Email?
Tutorial Terbaru
Partners
