wake-up-neo.com

Angular 4: Wie kann man auf lokale Json zugreifen?

In Angular2 könnten Sie einen Ordner/data/und eine Json-Datei haben und unter localhost darauf zugreifen: 4200/data/something.json.

Dies ist in Angular4 nicht mehr möglich. 

Irgendeine Idee, wie man es zum Laufen bringt?

javascriptjsonangular
15
Dan Neciu

sie können diesen Code verwenden

@Injectable()
export class AppServices{

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

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

     }
}

hier ist file.json Ihre lokale Json-Datei.

siehe auch hier

siehe auch das changlog von angle-cli für path 

11
Pardeep Jain

Natürlich ist es möglich. Nehmen wir an, hier ist Ihre Json-Datei

 enter image description here


Und hier ist Ihr Code, um den Json anzurufen 

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()
export class YourService {

   constructor(private http: Http) { }

   getAdvantageData(){
      let apiUrl = './assets/data/api/advantage.json';
      return this.http.get(apiUrl)
      .map( (response: Response) => {
         const data = response.json();
         return data;
      });
   }  
}
9
Vivek Shukla

Ich war mit demselben Problem konfrontiert, bei dem sich mein Observable Angular-Dienst im Ordner 'src/app /' befand und er versuchte, eine lokale JSON-Datei zu laden. Ich habe versucht, die JSON-Datei in demselben App-Ordner, in einem neuen 'api'-Ordner abzulegen, verschiedene Arten von Verwandten/absoluten Routen verwendet, aber es hat nicht geholfen und ich habe 404-Fehler erhalten. In dem Moment, in dem ich es in den Aktenordner stecke ... BAM !!! es funktionierte. Ich denke, da ist mehr dran ...

Kann dieser Link helfen ...

KOMPONENTEN-RELATIVE WEGE IM WINKEL

7
Deepak Pathak

Sie können auch "erfordern" verwenden.

let test = require('./test.json');
7
yazantahhan

Basierend auf diesem post ist hier die vollständige Antwort für Angular 6+:

Von angle-cli doc kann json als Assets betrachtet werden und vom Standardimport aus ohne Ajax-Anforderung aufgerufen werden.

Nehmen wir an, Sie fügen Ihre json-Dateien im Verzeichnis "your-json-dir" hinzu:

  1. fügen Sie "your-json-dir" in die Datei angle.json ein (:

    "assets": [ "src/assets", "src/your-json-dir" ]

  2. import von Json-Modulen in die Datei typings.d.ts ermöglichen, um TypeScript-Fehler zu vermeiden:

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

  3. importieren Sie die Datei in Ihrer Controller-/Dienst-/sonstigen Datei einfach mit diesem relativen Pfad:

    import * as myJson from 'your-json-dir/your-json-file.json';

3
Benjamin Caure

Sie können Ihren Ordnerspeicherort in Assets.json unter Assets-Tag hinzufügen

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],
0
deathrace

Ich habe es herausgefunden.

In Angular2 hatte ich den Ordner unter dem SRC-Ordner . In Angular4 muss es sich im Stammordner befinden.

Beispiel:

Angular2: 

root/src/data/file.json

Angular4:

root/data/file.json

0
Dan Neciu