Advertisement
  1. Code
  2. JavaScript

Parsing File CSV dengan JavaScript

by
Read Time:4 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Format file CSV (Comma Separated Values) adalah cara yang populer untuk bertukar data antar aplikasi.

Dalam tip cepat ini, kita akan belajar bagaimana JavaScript dapat membantu kita memvisualisasikan data file CSV.

Membuat File CSV

Untuk memulainya, mari membuat file CSV sederhana. Untuk melakukan ini, kita akan memanfaatkan Mockaroo, sebuah generator data uji online. Inilah file kita:

Initial-CSV-FileInitial-CSV-FileInitial-CSV-File

Mengkonversi File CSV ke Dalam Tabel HTML

Setelah kita membuat file, kita siap untuk mengurainya dan membuat tabel HTML yang terkait.

Sebagai langkah awal, kita akan menggunakan fungsi ajax jQuery untuk mengambil data dari file ini:

Dengan asumsi permintaan AJAX berhasil, maka successFunction dijalankan. Fungsi ini bertanggung jawab untuk mengurai data yang dikembalikan dan mengubahnya menjadi tabel HTML:

Jadi, idenya adalah mengonversi masing-masing baris CSV menjadi baris tabel. Dengan pemikiran tersebut, mari kami jelaskan secara singkat bagaimana kode diatas bekerja:

  • Pertama, kita menggunakan regex untuk membagi respons AJAX, dan dengan demikian memisahkan baris CSV.
  • Kemudian, kita iterasi melalui baris CSV dan membagi field datanya.
  • Akhirnya, kita melewati field data dan membuat sel tabel yang sesuai.

Selanjutnya, untuk mendapatkan pemahaman yang lebih baik tentang kode ini, perhatikan visualisasi berikut ini:

CSV-RepresentationCSV-RepresentationCSV-Representation

Pada titik ini, penting untuk memperjelas mengapa kami menggunakan regex /\r?\n|\r/ untuk membagi baris CSV.

Seperti yang mungkin sudah Anda ketahui, ada beberapa representasi newline di seluruh sistem operasi. Misalnya, pada platform Windows, karakter yang mewakili baris baru adalah \r\n. Konon, dengan menggunakan regex di atas, kita bisa mencocokkan semua representasi yang mungkin.

Selain itu, sebagian besar editor teks mengizinkan kita memilih format untuk baris baru. Ambil, misalnya, Notepad ++. Dalam editor ini, kita dapat menentukan format yang diinginkan untuk dokumen dengan menavigasi ke jalur ini:

Notepad++-EOLNotepad++-EOLNotepad++-EOL

Untuk mengilustrasikannya, perhatikan file kita. Tergantung pada format yang kita pilih, akan terlihat seperti ini:

CSV-EOLCSV-EOLCSV-EOL

Menambahkan Gaya ke Tabel HTML

Sebelum kita melihat tabel yang dihasilkan, mari menambahkan beberapa gaya dasar untuknya:

Inilah tabel yang dihasilkan:

Generated-TableGenerated-TableGenerated-Table

Kesimpulan

Dalam artikel singkat ini, kita menjalani proses pengubahan file CSV menjadi tabel HTML. Tentu saja, kita bisa menggunakan alat berbasis web untuk konversi ini, namun saya pikir selalu lebih menantang untuk mencapainya dengan menulis kode Anda sendiri.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.