Servizio Angular 5 per leggere il file .json locale

Sto usando Angular 5 e ho creato un servizio usando angular-cli

Quello che voglio fare è creare un servizio che legga un file json locale per Angular 5.

Questo è quello che ho ... sono un po 'bloccato ...

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));

  }

}

Come posso finire questo?

Prima devi iniettare HttpCliente non HttpClientModule, seconda cosa devi rimuovere .map((res:any) => res.json())non ne avrai più bisogno perché il nuovo HttpClientti darà il corpo della risposta di default, infine assicurati di importare HttpClientModulenel tuo 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");
    }
}

per aggiungerlo al tuo componente:

@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);
        });
   }
}

Hai una soluzione alternativa, importando direttamente il tuo json.

Per compilare, dichiara questo modulo nel tuo file typings.d.ts

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

Nel tuo codice

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

console.log(data_json)

Per Angular 7, ho seguito questi passaggi per importare direttamente i dati json:

In tsconfig.app.json:

aggiungi "resolveJsonModule": truea"compilerOptions"

In un servizio o componente:

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

E poi

private example = exampleData;

Ho trovato questa domanda cercando un modo per leggere davvero un file locale invece di leggere un file dal server web, che preferirei chiamare un "file remoto".

Basta chiamare require:

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

Il codice sorgente di Angular-CLI mi ha ispirato: ho scoperto che includono modelli di componenti sostituendo la templateUrlproprietà con templatee il valore con una requirechiamata alla risorsa HTML effettiva.

Se usi il compilatore AOT devi aggiungere le definizioni del tipo di nodo regolando tsconfig.app.json:

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

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

Vedi questo articolo per maggiori dettagli .

Prova questo

Scrivi il codice nel tuo servizio

import {Observable, of} from 'rxjs';

importa il file json

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

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

In componente

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

Creiamo un file JSON, lo chiamiamo navbar.json, puoi chiamarlo come preferisci!

navbar.json

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

Ora abbiamo creato un file JSON con alcuni dati di menu. Andremo al file del componente dell'app e incolleremo il codice seguente.

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;

}

Ora la tua app Angular 7 è pronta per fornire i dati dal file JSON locale.

Vai su app.component.html e incolla il codice seguente.

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>

Utilizzando Typescript 3.6.3 e Angular 6, nessuna di queste soluzioni ha funzionato per me.

Quello che ha funzionato è stato seguire il tutorial qui che dice che devi aggiungere un piccolo file chiamato njson-typings.d.tsal tuo progetto, contenente questo:

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

Una volta fatto ciò, potrei semplicemente importare i miei dati json hardcoded:

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

e usalo nel mio componente:

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

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