Dans ce scripts, nous allons voir comment récupérer des données stockées au format JSON (JavaScript Object Notation) avec Angular2

Data.js

[
    {"firstName":"Said","lastName":"MEZGANI"},
    {"firstName":"Ali","lastName":"SPERA"},
    {"firstName":"Amine","lastName":"TOUKABRI"},
    {"firstName":"Rachida","lastName":"GUILLAUME"},
    {"firstName":"Houda","lastName":"PONTOREAU"},
]

service.component.html

    <table class="table table-striped">
        <thead class="thead-default">
        <tr>
          <th>id</th>
          <th>firstName</th>
          <th>lastName</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let emplyee of emplyees; let i = index" [attr.data-index]="i">
                <td>{{i}}</td>
                <td>{{emplyee.firstName}}</td>
                <td>{{emplyee.lastName}}</td>
        </tr>
        </tbody>
    </table>

service.component.ts

import {Component, OnInit, Injectable} from '@angular/core';
import { Http, Headers, Response  } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { Observable, Subject} from 'rxjs/Rx';
import  {UserService} from './user.service';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';    
import 'rxjs/add/operator/toPromise';  

@Component({
  selector: 'service',
  styleUrls: ['./service.component.css'],
  templateUrl: './service.component.html',
  providers:[UserService]
})

@Injectable()
export class ServiceComponent implements OnInit {

  emplyees=[];

  constructor(private _userService : UserService) {  }

  ngOnInit() {
    //this.data = this._userService.getUsers();
    this._userService.getUsers().subscribe(resUserData => this.emplyees = resUserData);
  }

  headers = new Headers({'Content-Type': 'application/json','Accept': 'application/json'});

}

user.service.ts

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

@Injectable()
export class UserService {
  private _url:string="data/data.json";
  constructor (private _http: Http) {}

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

}