Nahrávanie neštruktúrovaných a štruktúrovaných dát patrí medzi operácie, ktoré programátor rieši medzi prvými v rámci architektúry aplikácie. V tomto článku budem demonštrovať rýchly spôsob nahratia súboru s JSON dátami.
V tomto článku predstavím dva spôsoby nahrávania JSON dát. Prvý spôsob je “natívny” založený na JavaScripte a druhý je už prevedenie v TypeScripte. Uvedené spôsoby nahrávania súborov s JSON dátami sú vhodné najmä pre testovacie účely.
Spôsob nahrávania JSON dát, ktorý predstavím v tomto článku, je 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,
....Pre demonštračné účely vytvorím nasledujúci súbor s JSON dátami. Ten umiestnim do adresára data.
Súbor output.json (src/app/data/output.json).
[
{
"json": "ok",
"msg": "works"
}
]Následne stačí do komponentu importovať súbor s JSON dátami a malou úpravou získať dáta k dispozícii.
Obsah súboru component.ts.
import { Component, OnInit } from '@angular/core';
import * as JSONData from 'src/app/data/output.json';
@Component({
selector: 'app-json',
templateUrl: './json.component.html',
styleUrls: ['./json.component.css']
})
export class JsonComponent implements OnInit {
rawData: any[] = JSONData;
data: string = this.rawData[0];
constructor() {
console.log(this.data);
}
ngOnInit(): void {
}
}V rámci templatu môžeme JSON dáta zobraziť nasledovne.
Obsah súboru component.html.
<p>JSON works!</p>
{{ data | json}}Druhý príklad je takmer identický, ale na základe type castingu je vo výsledku jednoduchší.
Obsah súboru component.ts.
import { Component, OnInit } from '@angular/core';
import * as Data from 'src/app/data/output.json';
@Component({
selector: 'app-import',
templateUrl: './import.component.html',
styleUrls: [ './import.component.css' ]
})
export class ImportComponent implements OnInit {
jsonData: any[] = (Data as any).default;
constructor() { }
ngOnInit(): void {
}
}V rámci templatu môžeme JSON dáta zobraziť nasledovne.
Obsah súboru component.html.
{{ jsonData | json }}Záver
Uvedené príklady boli vytvorené pre Angular vo verzii 14.
