Angular 5 Service untuk membaca file .json lokal

Saya menggunakan Angular 5 dan saya telah membuat layanan menggunakan angular-cli

Yang ingin saya lakukan adalah membuat layanan yang membaca file json lokal untuk Angular 5.

Inilah yang saya miliki ... Saya agak terjebak ...

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

Bagaimana saya bisa menyelesaikan ini?

Pertama Anda harus menyuntikkan HttpClientdan Tidak HttpClientModule, hal kedua yang harus menghapus .map((res:any) => res.json())Anda tidak akan membutuhkannya lagi karena baru HttpClientakan memberikan tubuh respon secara default, akhirnya pastikan bahwa Anda mengimpor HttpClientModuledalam Anda AppModule :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

untuk menambahkan ini ke Komponen Anda:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Anda memiliki solusi alternatif, mengimpor json Anda secara langsung.

Untuk mengkompilasi, deklarasikan modul ini dalam file typings.d.ts Anda

declare module "*.json" {
    const value: any;
    export default value;
}

Dalam kode Anda

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Untuk Angular 7, saya mengikuti langkah-langkah ini untuk langsung mengimpor data json:

Di tsconfig.app.json:

tambahkan "resolveJsonModule": truedi"compilerOptions"

Dalam layanan atau komponen:

import * as exampleData from '../example.json';

Lalu

private example = exampleData;

Saya menemukan pertanyaan ini ketika mencari cara untuk benar-benar membaca file lokal daripada membaca file dari server web, yang saya lebih suka menyebutnya "file jarak jauh".

Panggil saja require:

const content = require('../../path_of_your.json');

Kode sumber Angular-CLI menginspirasi saya: Saya menemukan bahwa mereka menyertakan template komponen dengan mengganti templateUrlproperti dengan templatedan nilainya dengan requirepanggilan ke sumber daya HTML yang sebenarnya.

Jika Anda menggunakan kompiler AOT, Anda harus menambahkan definisi tipe node dengan menyesuaikan tsconfig.app.json:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Lihat artikel ini untuk lebih jelasnya .

Coba ini

Tulis kode di layanan Anda

import {Observable, of} from 'rxjs';

impor file json

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

Dalam komponen

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Mari buat file JSON, beri nama navbar.json Anda dapat menamainya apa pun yang Anda inginkan!

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

Sekarang kami telah membuat file JSON dengan beberapa data menu. Kami akan pergi ke file komponen aplikasi dan menempelkan kode di bawah ini.

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

Sekarang aplikasi Angular 7 Anda siap untuk menyajikan data dari file JSON lokal.

Buka app.component.html dan tempel kode berikut di dalamnya.

app.component.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

Menggunakan Typecript 3.6.3, dan Angular 6, tidak ada solusi ini yang berhasil untuk saya.

Apa yang melakukan pekerjaan adalah untuk mengikuti tutorial di sini yang mengatakan Anda perlu menambahkan file kecil yang disebut njson-typings.d.tsuntuk proyek Anda, yang berisi ini:

declare module "*.json" {
  const value: any;
  export default value;
}

Setelah ini selesai, saya cukup mengimpor data json hardcode saya:

import employeeData from '../../assets/employees.json';

dan gunakan di komponen saya:

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }