Read Data from JSON File in AngularJS 2

Last Reply 6 months ago By dharmendr

Posted 6 months ago

hi 

i am not able To get The data From the json file,

below is My code.

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 = './jsf/example_1.json';

  constructor(private _http: Http) {

  }

   getallemployee() {

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

}

employee.component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {AppComponent} from '../app.component';
import {EmployeeService} from './employee.service';


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

})
export class EmployeeComponent implements OnInit {

  Employee: string [];

  constructor(private _empservice: EmployeeService) {
    console.log('HI');
  }
  ngOnInit() {
        this._empservice.getallemployee()
          .subscribe(resEmpDate => this.Employee = resEmpDate);
        console.log( this._empservice.getallemployee()
          .subscribe(resEmpDate => this.Employee = resEmpDate));
     }

  }

employee.component.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    table, th, td {
        border: 1px solid #969696;
      }

  </style>

</head>
<body>
<div class="row">
  <div class="col-lg-12">
    <table *ngIf="Employee">
      <!-- ADD HEADERS -->
      <tr>
        <th>Fruit</th>
      </tr>
      <!-- BIND ARRAY TO TABLE -->
      <tr *ngFor="let bird of Employee">
        <td>{{bird.fruit}}</td>
      </tr>
    </table>
 </div>
</div>
</body>
</html>

and Explain me how To put break point, in that so i can check

thanks and regards 'siddu