*Baca dulu bagian [pertama](https://www.codepolitan.com/belajar-parsing-file-xml-csv-dan-tsv-di-ionic-5ac1b37a59c64) dan [kedua](https://www.codepolitan.com/belajar-parsing-file-xml-csv-dan-tsv-di-ionic-bagian-2-5ac2f43eebea7)*

## Memuat dan Membaca File TSV

Sejujurnya, TSV bukan format data yang asyik untuk dipakai bekerja, penulis bahkan tidak tahu untuk apa ia diciptakan, tapi tidak ada yang tahu kapan pembaca suatu saat nanti akan bekerja dengan file jenis ini. 

Untungnya, membaca file serperti ini dengan Angulat/Ionic tidak sulit untuk dilakukan. 

Sekarang, kita perlu membuat dulu sumber datanya!

Membuat file TSV di Mac OS X bisa dengan membuka file **comics.numbers** yang sebelumnya sudah di buat, salin data di kolom dan baris-barisnya kemudian tempel dan simpan ke aplikasi secamam TextEdit dan simpan dengan nama **comics.tsv**.

Jika menggunakan Windows pembaca bisa cukup mengekspornya dari Microsoft Excel menggunakan file comics csv yang sudah ada. 

Seperti sebelumnya, kita perlu menyimpan file TSV ini di **comics/src/assets/data/**.

Sekarang modifikasi file **comics/src/pages/home/home.ts** untuk menambahkan kode berikut  di dalam kelas **HomePage**:

```typescript
public tsvItems : any;

constructor(public navCtrl: NavController,
            public http   : HttpClient)
{

}


ionViewWillEnter()
{
   this.loadTSV();
}


loadTSV()
{
   this.http.get('/assets/data/comics.tsv')
   .map(res => res.text())
   .subscribe((data)=>
   {
      var tsv         = this.parseTSVFile(data);
      this.tsvItems  = tsv;
   });
}


parseTSVFile(str)
{
   var arr  = [],
       obj  = [],
       row,
       col,
       c;


   // 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];

      arr[row]           = arr[row] || [];
      arr[row][col]  = arr[row][col] || '';

      // If it's a tab move on to the next column
      if (cc == '\t')
      {
         ++col;
         continue;
      }


      /* If it's a newline move on to the next
         row and move to column 0 of that new row */
      if (cc == '\n')
      {
         ++row;
         col = 0;
         continue;
      }


      // Otherwise, append the current character to the current column
      arr[row][col] += cc;
   }

   return this.formatParsedObject(arr, false);
}
```

Seperti yang bisa pembaca lihat, kodenya hampir sama dengan **loadCSV** dan **parseCSV** dibagian memuat dan membaca file CSV.

Selain perbedaan nama method (dan tentu saja pemuatan file **comics.tsv**), method **parseTSVFile** lebih sederhana karena hanya melakukan 2 pemeriksaan kondisi untuk melihat apakah karakter saat ini adalah sebuah Tab (yang artinya kita akan membaca kolom berikutnya) atau baris New Line (baris baru yang artinya kita akan mereset ulang pencatat nomor kolom dan masuk ke baris baru).

Sekali lagi, datanya dimasukkan ke array multidimensi yang kemudian dikirim ke method **formatParseObject** kali ini dengan **hasTitles** diatur menjadi false.  

Kita tentu saja akan menambahkan kode berikut di file **comics/src/pages/home/home.html** agar data TSV yang sudah dibaca bisa ditampilkan ke layar:

```typescript
<ion-item-group>
   <ion-item-divider color="light">TSV</ion-item-divider>
   <ion-item *ngFor="let item of tsvItems">
      {{ item.title }}
   </ion-item>
</ion-item-group>
```

Kemudian kita bisa menjalankan perintah **ionic serve** untuk melihat hasilnya. Berikut ini tampilan list yang membaca data dari file TSV. 

//

Hasil ini mengakhiri tutorial memuat dan membaca file TSV untuk Ionic. 

Seperti yang bisa pembaca lihat, logika untuk TSV sedikit lebih sederhana (karena tinggal mengubah sedikit kode dari pembacaan CSV sebelumnya) dan memanfaatkan method **formatParsedObject** untuk membaca data dan mengubahnya menjadi array objek JSON dan dikirim kembali ke template HTML untuk di render.

## Kode Keseluruhan

**home.ts**

```typescript
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import xml2js from 'xml2js';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   public xmlItems : any;
   public csvItems : any;
   public tsvItems : any;

   constructor(public navCtrl: NavController,
               public http   : HttpClient)
   {

   }



   ionViewWillEnter()
   {
      this.loadXML();
      this.loadCSV();
      this.loadTSV();
   }



   loadXML()
   {
      this.http.get('/assets/data/comics.xml')
      .map(res => res.text())
      .subscribe((data)=>
      {
         this.parseXML(data)
         .then((data)=>
         {
            this.xmlItems = data;
         });
      });
   }



   loadCSV()
   {
      this.http.get('/assets/data/comics.csv')
      .map(res => res.text())
      .subscribe((data)=>
      {
         var csv         = this.parseCSVFile(data);
             this.csvItems    = csv;
      });
   }



   loadTSV()
   {
      this.http.get('/assets/data/comics.tsv')
      .map(res => res.text())
      .subscribe((data)=>
      {
         var tsv     = this.parseTSVFile(data);
         this.tsvItems  = tsv;
      });
   }




   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] || [];             // create a new row if necessary
         arr[row][col]  = arr[row][col] || '';   // create a new column (start with empty string) if necessary

         /* 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);
   }



   parseTSVFile(str)
   {
      var arr  = [],
          obj  = [],
          row,
          col,
          c;


      // 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];

         arr[row]        = arr[row] || [];             // create a new row if necessary
         arr[row][col]  = arr[row][col] || '';   // create a new column (start with empty string) if necessary


         // If it's a tab move on to the next column
         if (cc == '\t')
         {
            ++col;
            continue;
         }


         /* If it's a newline move on to the next
            row and move to column 0 of that new row */
         if (cc == '\n')
         {
            ++row;
            col = 0;
            continue;
         }


         // Otherwise, append the current character to the current column
         arr[row][col] += cc;
      }

      return this.formatParsedObject(arr, false);
   }




   parseXML(data)
   {
      return new Promise(resolve =>
      {
         var k,
             arr    = [],
             parser = new xml2js.Parser({
                         trim: true,
                         explicitArray: true
                      });

         parser.parseString(data, function (err, result)
         {
            var obj = result.comics;
            for(k in obj.publication)
            {
               var item = obj.publication[k];
               arr.push({
                  id       : item.id[0],
                  title    : item.title[0],
                  publisher : item.publisher[0],
                  genre    : item.genre[0]
               });
            }

            resolve(arr);
         });
      });
   }



   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;
   }


}
```

**home.html**

```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-item-group>
      <ion-item-divider color="light">TSV</ion-item-divider>
      <ion-item *ngFor="let item of tsvItems">
         {{ item.title }}
      </ion-item>
   </ion-item-group>

</ion-content>
```

## Penutup

Membaca data XML, CSV, dan TSV tidak terlalu sulit untuk dilakukan di Ionic berkat method yang disediakan oleh framework Angular (dan library xml2js untuk membaca XML).

Sebisa mungkin untuk selalu menggunakan data bertipe JSON agar proses pemuatan dan pembacaannya lebih cepat dan mudah. Tapi kita sama-sama tapi, terkadang sistem yang akan dipakai tidak selalu memiliki opsi mengeluarkan file JSON. Jika itu terjadi, sekarang pembaca sudah memiliki dasar-dasar bagaimana untuk memakai pengetahuan yang sudah didapat agar aplikasi Ionic bisa terintegrasi dengan data dari sistem tersebut. 



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

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 3

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Tips Tetap Termotivasi Saat Belajar Pemrograman

Kaya Mendadak, Programmer Ini Berhasil Selesaikan Puzzle Bernilai $50,000

Nenek 82 Tahun Ini Buktikan Semua Bisa Jadi Programmer

Phaser 3, Framework Game HTML5 Jaman Now

Distro Linux Khusus Hacking Selain Kali Linux

Berbagai Sertifikasi Untuk Programmer yang Perlu Diketahui