Angular: Json
1.Local Json File
lire un fichier local du projetCréer le fichier src/app/data/data.json
[{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org"
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"phone": "010-692-6593 x09125",
"website": "anastasia.net"
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net",
"phone": "1-463-123-4447",
"website": "ramiro.info"
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner@kory.org",
"phone": "493-170-9623 x156",
"website": "kale.biz"
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger@annie.ca",
"phone": "(254)954-1289",
"website": "demarco.info"
}
]
2.Créer la component clients
import { Component, OnInit } from '@angular/core';
/*importer le fichier Json*/
import listeClientsJson from '../data/data.json';
@Component({
selector: 'app-clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
/*Charger la lise des clients*/
listeClients: any = listeClientsJson;
constructor() { }
ngOnInit(): void {
}
}
<div class="card text-dark mb-3">
<div class="card-header card bg-warning text-white">Liste Clients json file</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Name</th>
<th>username</th>
<th>email</th>
<th>phone</th>
<th>website</th>
</tr>
<tr *ngFor="let c of listeClients; let i=index">
<td>{{c.id}}</td>
<td>{{c.name}}</td>
<td>{{c.username}}</td>
<td>{{c.email}}</td>
<td>{{c.phone}}</td>
<td>{{c.website}}</td>
</tr>
</table>
</div>
</div>
Error: src/app/clients/clients.component.ts:3:30 - error TS2732: Cannot find module '../data/data.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
Afin de résoudre cet erreur créer le fichier src/app/json-typings.d.ts
declare module "*.json" {
const value: any;
export default value;
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailsComponent } from './details/details.component';
import { ClientsComponent } from './clients/clients.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list',component: ListComponent } ,
{ path: 'clients',component: ClientsComponent } ,
{ path: 'details/:id', component: DetailsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
1.Json api
Créer la component users
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users:any=[];
constructor(private http: HttpClient) {
this.getJSON().subscribe(data => {
this.users=data;
});
}
public getJSON(){
return this.http.get("https://jsonplaceholder.typicode.com/users");
}
ngOnInit(): void {
}
}
<div class="card text-dark mb-3">
<div class="card-header card bg-success text-white">Liste users json api</div>
<div class="card-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>Name</th>
<th>username</th>
<th>email</th>
<th>address</th>
</tr>
<tr *ngFor="let c of users; let i=index">
<td>{{c.id}}</td>
<td>{{c.name}}</td>
<td>{{c.username}}</td>
<td>{{c.email}}</td>
<td>{{c.address.street}}</td>
</tr>
</table>
</div>
</div>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailsComponent } from './details/details.component';
import { ClientsComponent } from './clients/clients.component';
import { UsersComponent } from './users/users.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ListComponent,
DetailsComponent,
ClientsComponent,
UsersComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule ,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailsComponent } from './details/details.component';
import { ClientsComponent } from './clients/clients.component';
import { UsersComponent } from './users/users.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list',component: ListComponent } ,
{ path: 'clients',component: ClientsComponent } ,
{ path: 'users',component: UsersComponent } ,
{ path: 'details/:id', component: DetailsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
