Angular – Ako rýchlo nahrať JSON file

Angular

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.

Uvedený spôsob nahrávania súborov s JSON dátami je 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}}

Záver

Uvedený príklad bol vytvorený pre Angular vo verzii 14.

https://www.mldgroup.com

Vyštudovaný top manažér pôsobiaci najmä ako manažér, marketér, softvérový inžinier, konzultant, bloger, YouTuber a zatiaľ neúspešný hudobník a producent. V rámci praxe pôsobil v rôznych odvetviach na rôznych pozíciách v malých aj veľkých firmách, vrátane spoluprác a partnerstiev s významnými firmami či poradenskými spoločnosťami.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená.