web-dev-qa-db-de.com

Angular 5 Service zum Lesen der lokalen .json-Datei

Ich verwende Angular 5 und habe einen Dienst erstellt, der das angle-cli verwendet

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

Das ist was ich habe ... Ich bin ein bisschen festgefahren ...

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 fertig stellen?

43
pedromartinez

Zuerst müssen Sie HttpClient und Not HttpClientModule, Injizieren. Zweitens müssen Sie .map((res:any) => res.json()) entfernen. Sie werden es nicht mehr benötigen, da das neue HttpClient standardmäßig den Hauptteil der Antwort enthält. Stellen Sie schließlich sicher, dass Sie HttpClientModule importieren. in Ihrem AppModule :

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

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

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

um dies zu Ihrer Komponente hinzuzufügen: 

@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, indem Sie Ihren Json direkt importieren.

Zum Kompilieren deklarieren Sie dieses Modul 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)
16

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

Rufen Sie einfach require auf:

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

Der Angular-CLI-Quellcode hat mich inspiriert: Ich habe herausgefunden, dass sie Komponentenvorlagen enthalten, indem die templateUrl-Eigenschaft durch template und der Wert durch einen require-Aufruf der tatsächlichen HTML-Ressource ersetzt wird.

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

"compilerOptions": {
  "types": ["node"],
  ...
},
...
7
fishbone
import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Siehe diesen Artikel für mehr Details .

2
Ole

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

In tsconfig.app.json:

"resolveJsonModule": true in "compilerOptions" hinzufügen

In einem Dienst oder einer Komponente:

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

Und dann

private example = exampleData;
1
jaycer

Lassen Sie uns eine JSON-Datei erstellen. Wir nennen sie navbar.json. Sie können sie nach Belieben 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>
0
Surya R Praveen

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 der Komponente

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