Example of HTTP With map operator of observable

Step1 : Create Service

ng g service myservice

Step2 :Add Following Code in myservice.ts

import { Injectable } from '@angular/core';
import { Http, HttpModule ,Response } from '@angular/http';
import 'rxjs/Rx';
@Injectable()
export class MyserviceService {

  constructor(private _http: Http) { }
  getdata()
  {
  return this._http.get('https://ganesha-51b6f.firebaseio.com/fname.json').map(

  (data: Response) => data.json());

  
  }

}

Note: Reactive Extensions for JavaScript(RxJS) is a reactive programming library which is used for composing asynchronous or callback-based code using observable. If map giving not existing code error than add following library.

npm install rxjs@6 rxjs-compat@6 --save

Note: Reference of httpmodule in app.module.ts is required in angular 6

Step 3: Add Following Code into App.Component.ts

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { MyserviceService } from 'app/myservice.service';
import { Http , HttpModule } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MyserviceService]
})
export class AppComponent implements OnInit {
  title = 'app works!';
  constructor(private service: MyserviceService){}
  ngOnInit()
  {
    this.service.getdata().subscribe(
      (data: any) => console.log(data)
    );
    
  }

}

Step 4: Run project

ng serve –open