Dalam tutorial ini, saya akan menunjukkan bagaimana Anda dapat menggunakan kelas FileReader untuk membaca file CSV dan menampilkan isinya pada halaman website menggunakan JavaScript.
Dalam JavaScript tersedia kelas FileReader untuk membaca data file. Dengan menggunakan ini, Anda dapat membaca dan melihat konten file sebelum mengunggahnya ke server.
Tanpa perlu berlama-lama lagi, yuk mari simak tutorial berikut membaca file csv serta menampilkan isinya menggunakan JavaScript.
Sebelum itu, disini saya akan menggunakan contoh file csv dengan stuktur seperti berikut ini.
S.no,Username,Name,Email 1,yssyogesh,Yogesh singh,[email protected] 2,bsonarika,Sonarika Bhadoria,[email protected] 3,vishal,Vishal Sahu,[email protected] 4,anilsingh,Anil singh,[email protected]
Membuat HTML
Sekarang kita perlu membuat file HTML dengan struktur sederhan terlebih dahulu atau Anda bisa copy code di bawah ini.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cara Membaca File CSV dan Menampilkan Isinya dengan JavaScript - Leravio</title> </head> <body> </body> </html>
Selanjutnya, Anda bisa membuat elemen file dan tombol. Gunakan <table> untuk membuat daftar data file CSV yang dipilih. Menambahkan event onclick pada tombol. Event ini memanggil fungsi readCSVFile().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membaca File CSV dan Menampilkan Isinya dengan JavaScript - Leravio</title>
<style type="text/css">
table th, table td{
padding: 5px;
}
</style>
</head>
<body>
<div>
<div>
<input type="file" name="file" id="file" accept=".csv" > <br><br>
<input type="button" id="btnsubmit" value="Submit" onclick="readCSVFile();" >
</div>
<br><br>
<!-- List CSV file data -->
<table id="tblcsvdata" border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th>S.no</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>Menampilkan CSV dengan JavaScript
Setelah itu, kita buat file main.js yang berada dalam satu folder yang sama dengan file index.html. Kemudian panggil file main.js di file index.html seperti berikut ini.
<script src="main.js"></script> </body> </html>
Pada file main.js buat fungsi readCSVFile() yang memanggil fungsi pada saat tombol diklik. Periksa apakah sebuah file dipilih atau tidak.
function readCSVFile(){
var files = document.querySelector('#file').files;
if(files.length > 0 ){
// Selected file
var file = files[0];
// FileReader Object
var reader = new FileReader();
// Read file as string
reader.readAsText(file);
// Load event
reader.onload = function(event) {
// Read file data
var csvdata = event.target.result;
// Split by line break to gets rows Array
var rowData = csvdata.split('\n');
// <table > <tbody>
var tbodyEl = document.getElementById('tblcsvdata').getElementsByTagName('tbody')[0];
tbodyEl.innerHTML = "";
// Loop on the row Array (change row=0 if you also want to read 1st row)
for (var row = 1; row < rowData.length; row++) {
// Insert a row at the end of table
var newRow = tbodyEl.insertRow();
// Split by comma (,) to get column Array
rowColData = rowData[row].split(',');
// Loop on the row column Array
for (var col = 0; col < rowColData.length; col++) {
// Insert a cell at the end of the row
var newCell = newRow.insertCell();
newCell.innerHTML = rowColData[col];
}
}
};
}else{
alert("Please select a file.");
}
}Berikut untuk penjelasan code di atas:
- Buat sebuah objek dari kelas FileReader jika sebuah file dipilih.
- Berikan instance file di readAsText() untuk membaca datanya sebagai sebuah string.
- Tambahkan event onload pada objek reader. Event ini akan dipanggil ketika file berhasil dibaca.
- Gunakan properti result untuk mendapatkan data file. Tetapkan data ke variabel csvdata.
- Pisahkan data string dengan jeda baris (\n) untuk mendapatkan data dalam format Array.
- Buat sebuah instance dari <table> <tbody> di mana perlu menambahkan data.
- Lakukan perulangan pada Array rowData. Di sini, untuk tidak membaca baris pertama saya menetapkan 1 ke variabel row tetapi Anda dapat menetapkan 0 jika Anda ingin membaca row pertama.
- Buat sebuah <tr> kosong – tbodyEl.insertRow().
- Pisahkan nilai baris dengan koma (,) untuk mendapatkan data kolom Array.
- Perulangan pada Array rowColData untuk membaca data kolom. Buat sel dan tambahkan nilai kolom – rowColData[col].
Penutup
Selamat sekarang Anda telah bisa membaca file CSV dan menampilkan isinya dengan menggunakan JavaScript. Selain itu, Anda dapat menggunakan kode ini untuk menampilkan pratinjau data file atau Anda juga dapat memodifikasi kode untuk menerapkan validasi.