V predchádzajúcom článku som uviedol príklad, ako rýchlo nahrať JSON file. V príklade som demonštroval nahratie dát obsahujúcich jeden objekt. V tomto článku vytváram service, kde nahráva pole objektov.
Rovnako ako v predchádzajúcom článku aj v tomto použijem dva spôsoby. Prvý spôsob je založený na JavaScripte a druhý na TypeScripte.
Spôsob nahrávania JSON dát je opäť založený na konfigurácii súboru tsconfig.json. V rámci tohto súboru je potrebné doplniť compilerOptions.
Úprava súboru tsconfig.json.
"compilerOptions": {
"resolveJsonModule": true,
....Ďalším krokom je vytvorenie JSON dát a uloženie ich do app/data/mockup.json. Dáta je potrebné ešte zabaliť do wraperra [].
Obsah súboru mockup.json.
[
[
{
"id": 1,
"first_name": "Bambi",
"last_name": "Cordeau]",
"email": "bcordeau0@zimbio.com",
"gender": "Female"
},
{
"id": 2,
"first_name": "Arel",
"last_name": "Annakin",
"email": "aannakin1@bizjournals.com",
"gender": "Male"
},
{
"id": 3,
"first_name": "Derron",
"last_name": "Camilli",
"email": "dcamilli2@go.com",
"gender": "Bigender"
},
{
"id": 4,
"first_name": "Thomas",
"last_name": "Ilyinykh",
"email": "tilyinykh3@jigsy.com",
"gender": "Male"
}
]
]Ďalším krokom je vytvorenie service
npx ng g s services/json-mockup
a aktualizácia súboru json-mockup.service.ts, kde prebehne samotné nahrávanie rovnakým spôsobom, aký bol uvedený v predchádzajúcom článku. Pre nahratie JSON dát umiestnených do wrappera [] je použitý príkaz import.
Obsah súboru json-mockup.service.ts.
import { Injectable } from '@angular/core';
import * as JSONData from 'src/app/data/mockup.json';
@Injectable({
providedIn: 'root'
})
export class JSONMockupService {
rawData: any[] = JSONData;
constructor() {
}
getJSONData() {
return this.rawData[0];
}
}Nasleduje aktualizácia súboru app.module.ts.
import { JSONMockupService } from './services/json-mockup.service';
...
providers: [JSONMockupService],
...Posledným krokom je použitie vytvoreného service.
Obsah súboru component.ts
import { Component, OnInit } from '@angular/core';
import { JSONMockupService } from 'src/app/services/json-mockup.service';
@Component({
selector: 'app-json-mockup',
templateUrl: './json-mockup.component.html',
styleUrls: ['./json-mockup.component.css']
})
export class JsonMockupComponent implements OnInit {
jsonData: any[] = [];
constructor(private JSONService: JSONMockupService) { }
ngOnInit(): void {
this.jsonData = this.JSONService.getJSONData();
}
}Na záver dáta zobrazíme v template.
Obsah súboru component.html.
<p>json-mockup works!</p>
{{jsonData | json}}Druhý spôsob nahrávania JSON dát je o niečo jednoduchší. Ako prvé, je potrebné upraviť JSON dáta do validnej podoby a to tak, že sa odstráni pridaný wrapper [].
Obsah súboru mockup.json.
[
{
"id": 1,
"first_name": "Bambi",
"last_name": "Cordeau]",
"email": "bcordeau0@zimbio.com",
"gender": "Female"
},
{
"id": 2,
"first_name": "Arel",
"last_name": "Annakin",
"email": "aannakin1@bizjournals.com",
"gender": "Male"
},
{
"id": 3,
"first_name": "Derron",
"last_name": "Camilli",
"email": "dcamilli2@go.com",
"gender": "Bigender"
},
{
"id": 4,
"first_name": "Thomas",
"last_name": "Ilyinykh",
"email": "tilyinykh3@jigsy.com",
"gender": "Male"
}
]Druhým krokom je zjednodušenie service, teda pôvodného kódu na nahravanie JSON dát.
Obsah súboru json-mockup.service.ts.
import { Injectable } from '@angular/core';
import * as Data from 'src/app/data/mockup.json';
@Injectable({
providedIn: 'root'
})
export class JSONMockupService {
jsonData: any[] = (Data as any).default;
constructor() {
}
getJSONData() {
return this.jsonData;
}
}Všetky ostatné súbory zostávajú nezmenené.
Záver
Ak chcete rýchlo vytvoriť testovacie JSON dáta, prečítajte si predchádzajúci článok venovaný tejto téme.
