Angular 5 Service zum Lesen der lokalen .json-Datei

Ich verwende Angular 5 und habe einen Dienst mit dem Angular-CLI erstellt

Ich möchte einen Dienst erstellen, der eine lokale JSON-Datei für Angular 5 liest.

Das habe ich ... ich stecke ein bisschen fest ...

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

  }

}

Wie kann ich das fertigstellen?

Zuerst müssen Sie injizieren HttpClientund nicht HttpClientModule, die zweite Sache , die Sie entfernen müssen , .map((res:any) => res.json())werden Sie es nicht mehr brauchen , weil die neue HttpClientSie den Körper der Antwort durch Standard geben, stellen schließlich sicher , dass Sie importieren HttpClientModulein Ihrer 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");
    }
}

So fügen Sie dies Ihrer Komponente hinzu:

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

Sie haben eine alternative Lösung, bei der Sie Ihren JSON direkt importieren.

Deklarieren Sie dieses Modul zum Kompilieren in Ihrer Datei typings.d.ts

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

In deinem Code

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

console.log(data_json)

Für Angular 7 habe ich die folgenden Schritte ausgeführt, um JSON-Daten direkt zu importieren:

In tsconfig.app.json:

hinzufügen "resolveJsonModule": truein"compilerOptions"

In einem Dienst oder einer Komponente:

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

Und dann

private example = exampleData;

Ich habe diese Frage gefunden, als ich nach einer Möglichkeit gesucht habe, eine lokale Datei wirklich zu lesen, anstatt eine Datei vom Webserver zu lesen, die ich lieber als "entfernte Datei" bezeichnen würde.

Rufen Sie einfach an require:

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

Der Angular-CLI-Quellcode hat mich inspiriert: Ich fand heraus, dass sie Komponentenvorlagen enthalten, indem ich die templateUrlEigenschaft durch templateund den Wert durch einen requireAufruf der tatsächlichen HTML-Ressource ersetzte .

Wenn Sie den AOT-Compiler verwenden, müssen Sie die Knotentypdefinitionen hinzufügen, indem Sie Folgendes anpassen tsconfig.app.json:

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

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

Weitere Informationen finden Sie in diesem Artikel .

Versuche dies

Schreiben Sie Code in Ihren Dienst

import {Observable, of} from 'rxjs';

JSON-Datei importieren

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

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

In Komponente

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

Lassen Sie uns eine JSON-Datei erstellen, wir nennen sie navbar.json. Sie können sie beliebig benennen!

navbar.json

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

Jetzt haben wir eine JSON-Datei mit einigen Menüdaten erstellt. Wir gehen zur App-Komponentendatei und fügen den folgenden Code ein.

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;

}

Jetzt ist Ihre Angular 7-App bereit, die Daten aus der lokalen JSON-Datei bereitzustellen.

Gehen Sie zu app.component.html und fügen Sie den folgenden Code ein.

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>

Mit Typescript 3.6.3 und Angular 6 funktionierte keine dieser Lösungen für mich.

Was tat Arbeit war das Tutorial zu folgen hier die sagen , Sie brauchen eine kleine Datei mit dem Namen hinzufügen njson-typings.d.tszu einem Projekt, mit dieser:

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

Sobald dies erledigt war, konnte ich einfach meine fest codierten JSON-Daten importieren:

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

und benutze es in meiner Komponente:

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

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