`Level menengah, pembaca diharapkan sudah pernah belajar dasar-dasar Ionic sebelumnya.`

Konten boleh jadi sang Raja tapi tanpa cara untuk memparsing format-format yang berbeda, maka aplikasi mobile kita akan sulit mengakses konten jenis apapun. 

Meskipun JSON merupakan format yang pailng populer dan banyak dipakai untuk bertukar data, namun kita pasti akan sering bertemu dan wajib bekerja dengan format-format lain seperti XML, CSV (Comma Separated Values) bahkan TSV (Tabbed Separated Values).

Ada banyak alasan mengapa klien masih menggunakan format data yang sudah lama. Bisa jadi sistem jadul yang tidak bisa diupgrade tanpa mengeluarkan biaya yang besar atau pengaruh negatif yang bisa didapatkan oleh perusahaan tersebut apabila sistemnya diubah menjadi dua dari sekian banyak alasan tersebut. 

Di tutorial ini kita akan belajar bagaimana mem-parsing XML, CSV, dan TSV menjadi objek JavaScript agar bisa dipakai di aplikasi Ionic kita. 

## Apa yang Akan Kita Buat

Untuk tutorial ini kita akan membuat aplikasi dengan satu halaman yang menampilkan 3 list untuk tiga jenis konten berupa judul komik Inggris dari tahun 60-an sampai 80-an. Setiap list akan menggunakan data yang diimpor dan di parse dari tiga jenis format yang berbeda.

Setelah koding aplikasi selesai dan dijalankan di browser komputer kita, hasilnya kurang lebih akan terlihat sebagai berikut.:

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/british-comics-listings.png)

Mari kita buat kerangka awal aplikasinya. 

Di aplikasi terminal, jalankan perintah CLI berikut:

```
ionic start comic blank
```

Tidak banyak konfigurasi yang akan kita lakukan selain memasang satu package node.js yang kaan kita bahas di bagian berikutnya. Sebagian besar waktu yang kita habiskan adalah untuk proses koding logika parsing beberapa data yang berbeda. 

Sekarang setelah struktur dasar aplikasi kita siap sekarang saatnya untuk mengimpor dan memparsing data XML yang akan kita pakai. 

## Loading dan Parsing Data XML

Pernah menjadi standar utama pertukaran data XML (singkatan dari eXtensible Markup Language) adlah sebuah bahasa berbasis tag sama seperti HTML yang diturunkan dari SGML (Standard Generalized Markup Language). 

Meski populer dan banyak dipakai, XML memiliki banyak kekurangan diantaranya:

- Sulit memetakan data XML ke format lain atau struktur tabel database
- Tidak mudah berbagi data antar aplikasi dengan XML
- Sintaksnya relatif lebih kompleks (dibanding format seperti YAML atau JSON)

Anehnya, Angular (framework yang menjadi dasar Ionic) tidak memberikan dukungan native untuk memparsing XML yang artinya kita harus bergantung pada package pihak ketiga untuk menambahkan fungsi ini di aplikasi.

Untuk tutorial ini kita akan memakai package [node-xml2js](https://github.com/Leonidas-from-XIV/node-xml2js). Package ini memberikan API yang paling mudah dan sederhana untuk memparsing XML menjadi array JavaScript.

Buka lagi aplikasi terminal dan jalankan (pastikan nodejs dan npm sudah terpasang):

```
npm install xml2js
```

Jika muncul pesan permission error, tambahkan perintah **sudo** di depan. 

Setelah terpasang, mari kita definisikan struktur ata XML dan membaca data asli yang akan dipakai di aplikasi. 

Di dalam editor teks pilihan silahkan tulis kode XML di bawah lalu simpan dengan nama **comics.xml** ke dalam folder **comics/src/assets/data** (untuk sub-folder **data** silahkan buat sendiri):

```xml
<?xml version="1.0"?>
<comics>
   <publication>
      <id>1</id>
      <title>Valiant</title>
      <publisher>Fleetway</publisher>
      <genre>Action/Adventure</genre>
   </publication>
   <publication>
      <id>2</id>
      <title>Victor</title>
      <publisher>IPC Magazines</publisher>
      <genre>Action/Adventure/War</genre>
   </publication>
   <publication>
      <id>3</id>
      <title>Lion</title>
      <publisher>IPC Magazines</publisher>
      <genre>Action/Adventure/War/Science Fiction/Information</genre>
   </publication>
   <publication>
      <id>4</id>
      <title>Battle</title>
      <publisher>IPC Magazines</publisher>
      <genre>Action/Adventure/War</genre>
   </publication>
   <publication>
      <id>5</id>
      <title>2000AD</title>
      <publisher>IPC Magazines</publisher>
      <genre>Thriller/Science Fiction/Myth/History</genre>
   </publication>
   <publication>
      <id>6</id>
      <title>Warlord</title>
      <publisher>IPC Magazines</publisher>
      <genre>War</genre>
   </publication>
   <publication>
      <id>7</id>
      <title>Eagle</title>
      <publisher>IPC Magazines</publisher>
      <genre>Science Fiction/Thriller/Adventure</genre>
   </publication>
   <publication>
      <id>8</id>
      <title>Transformers UK</title>
      <publisher>Marvel</publisher>
      <genre>Science Fiction/Action</genre>
   </publication>
</comics>
```

Seperti yang bisa pembaca lihat, struktur di atas sesungguhnya cukup sederhana. Kita hanya memiliki list daftar komik dimana setiap komiknya memiliki judul (title), penerbit (publisher), dan kategori (genre).

Sekarang mari kita buat logika untuk memparsing file XML ini. Buka file **comics/src/pages/home/home.ts** untuk mengimplementasi kode TypeScript:

```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;

   constructor(public navCtrl: NavController,
               public http   : HttpClient)
   {

   }



   ionViewWillEnter()
   {
      this.loadXML();
   }



   loadXML()
   {
      this.http.get('/assets/data/comics.xml')
      .map(res => res.text())
      .subscribe((data)=>
      {
         this.parseXML(data)
         .then((data)=>
         {
            this.xmlItems = data;
         });
      });
   }


   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);
         });
      });
   }


}
```

Pada kode di atas, kita terlebih dahulu mengimpor package node `xml2js`:

```
import xml2js from 'xml2js';
```

Kita juga akan mengimpor package HttpClient dan modul Reactive Extensions for JavaScript. Modul-modul ini akan memungkinkan kita memuat file eksternal serta memanfaatkan Promises dan Observables untuk mengelola data secara asynchronous:

```
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
```

Method **loadXML**, sesuai namanya akan meng-handle pembacaan file **comics.xml**. Di dalamnya memakai **map** untuk mengubah data yang diimpor menjadi teks sebelum mengirimkannya ke method **subscribe** sebagai sebuah observable. 

Setelah data berhasil dibaca kita lalu mengirimkan data tersebut ke method **parseXML** yang menggunakan Promise untuk menghandle data asynchronous yang di return, mengubah XML menjadi JSON dan mengisinya ke properti **xmlitems** (properti ini lah yang akan dipakai oleh halaman template kita untuk merender list komik di layar):

```typescript
loadXML()
{
   this.http.get('/assets/data/comics.xml')
   .map(res => res.text())
   .subscribe((data)=>
   {
      this.parseXML(data)
      .then((data)=>
      {
         this.xmlItems = data;
      });
   });
}
```

Di method **parseXML** kita akan mulai membuat objek **xml2js** baru dengan mengirimkan data konfigurasi parser key/value berikut:

- **trim: true** (menghapus spasi kosong di depan dan akhir nodes)
- **explicitArray: true** (Selalu mengubah child node ke dalam array)

Opsi konfigurasi lain untuk **xml2js** bisa dilihat [di sini](https://github.com/Leonidas-from-XIV/node-xml2js#options). 

Objek parser ini kemudian bisa kita pakai untuk memanggil method **parseString** yang mengubah xml menjadi JSON. Didalamnya kita hanya membaca objek JSON dari data menjadi objek yang kemudian kita push ke sebuah array dan diakhir method kita kirim ke pemanggilan method melalui **resolve**. 

```typescript
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);
      });
   });
}
```

Method **loadXML** akan kita panggil dari dalam **ionViewWillEnter**:

```typescript
ionViewWillEnter()
{
   this.loadXML();
}
```

Method ionViewWillEnter bisa dimanfaatkan saat kita ingin melakukan sesuatu sesaat sebelum halaman template akan ditampilkan. 

Selanjutnya mari kita atur template HTML agar data XML yang tadi dibaca bisa tampil di halaman view. 

Buka file **comics/src/pages/home/home.html** dan ubah menjadi:

```typescript
<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-content>
```

Tidak ada yang kompleks dari HTML kode di atas, hanya **ngFor** sederhana untuk membaca data JSON yang sudah diparsing untuk membuat elemen <ion-item> yang menampilkan data setiap judul komik. 

Sebelum bisa kita lihat di browser desktop kita perlu mengimpor HttpClientModule dari Angular di dalam module root application. Dengan mengimpor modul ini kita bisa memakai HttpClient di dalam kelas komponen page Home. 

Buka file **comics/src/app/app.module.ts** lalu impor HttpClientModule sebagai berikut:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
```

Kembali ke aplikasi terminal dan jalankan perintah **ionic serve**. Kita akan melihat tampilan sebagai berikut. 

![](https://static.cdn-cdpl.com/source/998b78e349061b4971c0a2b0e8d6be41/xml-listings.png)

Jika sudah muncul tampilan seperti di atas, pembaca sudah berhasil mengimpor, memparse dan mengubah data XML menjadi JSON lalu menampilkannya di halaman aplikasi Ionic dan semua itu dilakukan dengan cara yang relatif mudah. Kemudahan ini bisa didapatkan berkat penggunaan [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js). 

Untuk parsing CSV bisa di baca [di lanjutan artikel ini di sini](https://www.codepolitan.com/belajar-parsing-file-xml-csv-dan-tsv-di-ionic-bagian-2-5ac2f43eebea7). 

*Diterjemahkan dari [Parsing XML, CSV and TSV files with Ionic](http://masteringionic.com/blog/2016-12-18-parsing-xml-csv-and-tsv-files-with-ionic/) karya James Griffiths*

Belajar Parsing File XML, CSV, dan TSV di Ionic

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

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