CODEWITHSUNDEEP
angular
Heena
Heena

Reputation: 1783

Fetching data using Http in angular 2

I am trying to create a simple application in angular 2 to fetch data using Http. I created two classes employee-list and employee-detail and a service with the name employee.service.ts which makes an Http call and recieve the observable and map it.

I also create a folder in src with the name apidata in which i kept my data to be fetched in the employeedata.json file.

And later subscribe to the observable and assign the data to local variable in the view.

My code is being compiled successfully .But iam unable to fetch data.

Below shown is my code snippets

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Employee</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>
<body>
  <app-root>Loading.....</app-root>
</body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Http, Response} from '@angular/http';

import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list.component';
import { EmployeeDetailComponent } from './employee-detail.component';
import { EmployeeService } from './employee.service';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
    EmployeeDetailComponent
  ],

  imports: [ BrowserModule, HttpModule ],

  providers: [EmployeeService],

  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',

  providers: [EmployeeService]


})
export class AppComponent {
  title = 'app';
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:justify-all;">
  <h3>
    Welcome to {{title}}!
  </h3>
 <h4> Random Company</h4>
  <h4> ...........</h4>

  <employee-list></employee-list>
  <employee-detail></employee-detail>

employee-list.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';

@Component({
    selector: 'employee-list',
    template: `<h4>Employee List</h4>'
                <ul *ngFor=" let employee of employees ">
                <li>{{employee.name}}</li>
                </ul>`
})

export class EmployeeListComponent implements OnInit{
employees = [];

constructor(private _employeeService:EmployeeService){}
ngOnInit(){
this._employeeService.getEmployees()
.subscribe(resEmployeeData => this.employees = resEmployeeData);
}
}

employee-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from './employee.service';

@Component({
    selector: 'employee-detail',
    template: `<h4>Employee Details</h4>'
                <ul *ngFor=" let employee of employees ">
                <li>{{employee.id}}.{{employee.name}}-{{employee.gender}}</li>
                </ul>`
})

export class EmployeeDetailComponent implements OnInit{
employees = [];

constructor(private _employeeService:EmployeeService){}
ngOnInit(){
this.employees = this._employeeService.getEmployees();
}
}

employee.service.ts

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()

export class EmployeeService {

private _url: string = "apidata/employeedata.json"

constructor(private _http: Http){}

    getEmployees(){
    return this._http.get(this._url)
    .map((response:Response) => response.json() );
}}

Can anybody please let me know what is that i am missing in my application. Why my application isn't fetching data ?

Upvotes: 0

Views: 1555

Answers (1)

pioro90
pioro90

Reputation: 694

I think you must subscribe to observable which is return from your service. You can do this in your component (observable.subscribe()) or in your template:

employee-detail.component.ts

<ul *ngFor=" let employee of employees | async">

Upvotes: 1

Related Questions