Angular Http Request – 3

Melanjutkan dari modul sebelumnya, sekarang kita akan bahas membaca data dari firebase.

Buka file app.component.ts, tambahkan code untuk melakukan fetch data

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loadedPosts = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    //fetch data menggunakan private method
    this.fetchPosts();
  }

  onCreatePost(postData: { title: string; content: string }) {
    this.http.post('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', postData).subscribe(
      responseData =>{
        console.log(responseData);
      }
    );
  }

  onFetchPosts() {
    //fetch data menggunakan private method
    this.fetchPosts();
  }

  onClearPosts() {
  }

  //private method untuk fetch data
  private fetchPosts(){
    this.http.get('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json').subscribe(
      responseData =>{
        console.log(responseData);
      }
    );
  }
}

Jika Anda jalankan, sesuai ekspektasi, data dari firebase berhasil kita fetch.

Transform Response Data

Setelah berhasil menarik data dari server, berikutnya adalah kita perlu melakukan transformasi data, karena ada perbedaan format.

Untuk itu digunakan method pipe pada http object dengan perintah map untuk melakukan transformasi data, untuk itu perlu diimport dari rxjs/operators.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators'; //import library map untuk melakukan transform data

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loadedPosts = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.fetchPosts();
  }

  onCreatePost(postData: { title: string; content: string }) {
    this.http.post('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', postData).subscribe(
      responseData =>{
        console.log(responseData);
      }
    );
  }

  onFetchPosts() {
    this.fetchPosts();
  }

  onClearPosts() {
  }

  private fetchPosts(){
    this.http
      .get('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json')
      .pipe(map(responseData =>{ //proses transform data dari javascript object menjadi array.
        const postArr = [];
        for (const key in responseData){
          if (responseData.hasOwnProperty(key)){
            postArr.push({...responseData[key], id: key});
          }
        }
        return postArr;
      }))
      .subscribe( posts =>{
        console.log(posts);
      }
    );
  }
}

Sesuai ekspektasi, sekarang data sudah berupa array.