Angular – Ako rýchlo spraviť JSON mockup service

Angular

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.

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á.