Baca dulu bagian pertama [di sini](https://www.codepolitan.com/belajar-parsing-file-xml-csv-dan-tsv-di-ionic-5ac1b37a59c64). 

## Memuat dan Membaca File CSV

Meski CSV bukan jenis format data yang paling enak untuk dipakai bekerja, tapi ada saatnya dimana kita tidak punya pilihan lain selain CSV. 

Buka aplikasi spreadsheet (Microsoft Excel atau LibreOffice Calc) lalu buat sebuah tabel dengan struktur sebagai berikut:

| id   | title           | publisher     | genre                                            |
| ---- | --------------- | ------------- | ------------------------------------------------ |
| 1    | Valiant         | Fleetway      | Action/Adventure                                 |
| 2    | Victor          | IPC Magazines | Action/Adventure/War                             |
| 3    | Lion            | IPC Magazines | Action/Adventure/War/Science Fiction/Information |
| 4    | Battle          | IPC Magazines | Action/Adventure/War                             |
| 5    | 2000AD          | IPC Magazines | Thriller/Science Fiction/Myth/History            |
| 6    | Warlord         | IPC Magazines | War                                              |
| 7    | Eagle           | IPC Magazines | Science Fiction/Thriller/Adventure               |
| 8    | Transformers UK | Marvel        | Science Fiction/Action                           |

Simpan dengan nama **comics.xml** (atau, jika menggunakan aplikasi Number di Apple, comics.numbers) lalu ekspor file tersebut dengan nama **comics.csv** ke folder **comics/src/assets/data/**.

Dengan file **comics.csv** tersimpan ditempat yang bisa diakses oleh aplikasi, sekarang kita bisa menuliskan logika untuk mengimpor file dan memparsing datanya. 

Modifikasi file **comics/src/pages/home/home.ts** sehingga memiliki kode berikut di dalam kelas **HomePage**:

```typescript
public csvItems : any;

constructor(public navCtrl: NavController,
            public http   : HttpClient)
{

}


ionViewWillEnter()
{
   this.loadCSV();
}


loadCSV()
{
   this.http.get('/assets/data/comics.csv')
   .map(res => res.text())
   .subscribe((data)=>
   {
      var csv         = this.parseCSVFile(data);
      this.csvItems  = csv;
   });
}



parseCSVFile(str)
{
   var arr  = [],
       obj  = [],
       row,
       col,
       c,
       quote   = false;  // true means we're inside a quoted field

   // iterate over each character, keep track of current row and column (of the returned array)
   for (row = col = c = 0; c < str.length; c++)
   {
      var cc = str[c],
          nc = str[c+1];        // current character, next character

      arr[row]           = arr[row] || [];
      arr[row][col]  = arr[row][col] || '';

      /* If the current character is a quotation mark, and we're inside a
    quoted field, and the next character is also a quotation mark,
    add a quotation mark to the current column and skip the next character
      */
      if (cc == '"' && quote && nc == '"')
      {
         arr[row][col] += cc;
         ++c;
         continue;
      }


      // If it's just one quotation mark, begin/end quoted field
      if (cc == '"')
      {
         quote = !quote;
         continue;
      }


      // If it's a comma and we're not in a quoted field, move on to the next column
      if (cc == ',' && !quote)
      {
         ++col;
         continue;
      }


      /* If it's a newline and we're not in a quoted field, move on to the next
         row and move to column 0 of that new row */
      if (cc == '\n' && !quote)
      {
         ++row;
         col = 0;
         continue;
      }

      // Otherwise, append the current character to the current column
      arr[row][col] += cc;
   }

   return this.formatParsedObject(arr, true);
}



formatParsedObject(arr, hasTitles)
{
   let id,
       title,
       publisher,
       genre,
       obj = [];

   for(var j = 0; j < arr.length; j++)
   {
      var items         = arr[j];

      if(items.indexOf("") === -1)
      {
         if(hasTitles === true && j === 0)
         {
            id            = items[0];
            title        = items[1];
            publisher    = items[2];
            genre         = items[3];
         }
         else
         {
            obj.push({
               id          : items[0],
               title       : items[1],
               publisher   : items[2],
               genre       : items[3]
            });
         }
      }
   }
   return obj;
}
```

Cukup banyak kode yang kita tulis jadi mari kita bahas satu per satu.

Method **loadCSV** menggunakan method **get** dari kelas http milik Angular 2 untuk memuat URL file (dalam hal ini adalah file **comics.csv**), lalu memanggil method map untuk mengubah data yang dimuat menjadi text sebelum mengirimkannya ke method **subscribe**.

Di dalam observable kita lalu mengirimkan data CSV tersebut ke method **parseCSVFile**. Setelah selesai melakukan parsing, method ini akan mengembalikan objek JSON yang kemudian disimpan ke dalam properti **csvItems** untuk dipakai di template HTML. 

```typescript
loadCSV()
{
   this.http.get('/assets/data/comics.csv')
   .map(res => res.text())
   .subscribe((data)=>
   {
      var csv     = this.parseCSVFile(data);
      this.csvItems = csv;
   });
}
```

Method **parseCSVFile** ini sedikit lebih rumit, ia meng-handle data CSV yang dikirimka karakter per karakter untuk menentukan tipenya (memeriksa apakah karakter tersebut tanda tanya, koma, atau baris baru misalnya) dan menentukan aksi apa yang harus diambil untuk setiap karakter tersebut. 

Proses ini akan menghasilkan konten berbentuk array multidimensi sesuai dengan kolom/baris yang terdapat di data CSV. Konten yang dihasilkan kemudian diproses oleh method **formatPrasedObject**:

```typescript
parseCSVFile(str)
{
   var arr  = [],
       obj  = [],
       row,
       col,
       c,
       quote   = false;  // true means we're inside a quoted field

   // iterate over each character, keep track of current row and column (of the returned array)
   for (row = col = c = 0; c < str.length; c++)
   {
      var cc = str[c],
          nc = str[c+1];        // current character, next character

      arr[row]       = arr[row] || [];
      arr[row][col] = arr[row][col] || '';

      /* If the current character is a quotation mark, and we're inside a
         quoted field, and the next character is also a quotation mark,
         add a quotation mark to the current column and skip the next character
      */
      if (cc == '"' && quote && nc == '"')
      {
         arr[row][col] += cc;
         ++c;
         continue;
      }


      // If it's just one quotation mark, begin/end quoted field
      if (cc == '"')
      {
         quote = !quote;
         continue;
      }


      // If it's a comma and we're not in a quoted field, move on to the next column
      if (cc == ',' && !quote)
      {
         ++col;
         continue;
      }


      /* If it's a newline and we're not in a quoted field, move on to the next
         row and move to column 0 of that new row */
      if (cc == '\n' && !quote)
      {
         ++row;
         col = 0;
         continue;
      }

      // Otherwise, append the current character to the current column
      arr[row][col] += cc;
   }

   return this.formatParsedObject(arr, true);
}
```

Logika untuk method di atas, diambil dari post [Stack Overflow](http://stackoverflow.com/a/14991797) berikut dengan sedikit perubahan. Semua kredit harus diberika kepada Trevor Dixon karena telah berbagai solusi yang terbaik. 

Method **formatParsedObject** akan membaca konten CSV yang sebelumnya sudah dibaca oleh **parseCSVFile** agar berubah menjadi JSON yang bisa dikirimkan lagi ke halaman HTML. 

Yang dilakukan oleh method ini hanyalah melakukan looping pada data yang dierimanya, memeriksa apakah ada array kosong yang baru dibuat, memeriksa apakah item pertama di array adalah field titles dari file CSV (dilakukan oleh method **hasTitle**) dan setelahnya membuat objek-objek individu yang masing-masing memiliki data publikasi. Objek-objek ini lalu dimasukkan ke sebuah array dan dikirim balik dari method ini setelah semua objek selesai dibuat:

```typescript
formatParsedObject(arr, hasTitles)
{
   let id,
       title,
       publisher,
       genre,
       obj = [];

   for(var j = 0; j < arr.length; j++)
   {
      var items   = arr[j];

      if(items.indexOf("") === -1)
      {
         if(hasTitles === true && j === 0)
         {
            id           = items[0];
            title        = items[1];
            publisher   = items[2];
            genre        = items[3];
         }
         else
         {
            obj.push({
               id           : items[0],
               title       : items[1],
               publisher   : items[2],
               genre       : items[3]
            });
         }
      }
   }
   return obj;
}
```

Sekarang yang perlu kita lakukan adalah menulis kode HTML berikut ke file **comics/src/pages/home/home.html**:

```html
<ion-item-group>
   <ion-item-divider color="light">CSV</ion-item-divider>
   <ion-item *ngFor="let item of csvItems">
      {{ item.title }}
   </ion-item>
</ion-item-group>
```

Tambahkan kode di atas di bawah kode untuk XML. 

```html
<ion-header>
   <ion-navbar>
      <ion-title>
         British Comics of the 60's - 80's
      </ion-title>
   </ion-navbar>
</ion-header>

<ion-content padding>

   <ion-item-group>
      <ion-item-divider color="light">XML</ion-item-divider>
      <ion-item *ngFor="let item of xmlItems">
         {{ item.title }}
      </ion-item>
   </ion-item-group>


   <ion-item-group>
      <ion-item-divider color="light">CSV</ion-item-divider>
      <ion-item *ngFor="let item of csvItems">
         {{ item.title }}
      </ion-item>
   </ion-item-group>

</ion-content>
```

Setelah melakuakn perintah **ionic serve**, kita akan mendapat pesan berikut ini di layar:

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/csv-listings.png)

Dibandingkan saat memparsing XML, bekerja dengan CSV dan mengubahnya menjadi JSON membutuhkan lebih banyak usaha namun, untungnya juga tidak terlalu sulit. 



Belajar Parsing File XML, CSV, dan TSV di Ionic Bagian 2

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Belajar Parsing File XML, CSV, dan TSV di Ionic Bagian 2

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Cara Mudah Membuat Carousel di Android Studio

Tips Mengambil Gambar dan Video Layar Perangkat Android dari Android Studio

Membuat Pemutar Audio Sederhana di Android dengan ExoPlayer

Tips Pindah File dengan Cepat di Android Studio

Menggunakan Intention Action di Android Studio (Sulap ALT+ENTER)

Tips Mencegah Android Studio Membuka Project Terakhir Saat Startup