Angular4: как получить доступ к локальному json?

Ответ 1

вы можете использовать этот код

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

     }
}

здесь file.json - ваш локальный файл json.

см. также

• Как получить json файл в angular2 с использованием класса Http

также см. changlog of angle-cli для пути

• https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc4-2017-03-20

Ответ 2

Конечно, это возможно. Предположим, что это ваш json файл

И вот ваш код для вызова json

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

Ответ 3

Я столкнулся с той же проблемой, когда моя служба Observable Angular находилась в папке src/app/', и она пыталась загрузить локальный файл JSON. Я попытался поместить файл JSON в одну и ту же папку приложения, в новую папку "api", использовать различные типы родственников/абсолютных маршрутов, но это не помогло, и я получил ошибку 404. В тот момент, когда я положил его в папку "assets"... BAM !!! это сработало. Я думаю, что есть еще что-то...

Может быть, эта ссылка помогает...

КОМПОНЕНТНО-ОТНОСИТЕЛЬНЫЕ ПУТЫ В УСИЛИЯХ

Ответ 4

Вы также можете использовать "require",

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

Ответ 5

Основываясь на этом сообщении, вот полный ответ для Angular 6+:

Из документа angular-cli json можно рассматривать как активы и получить доступ из стандартного импорта без использования запроса ajax.

Предположим, вы добавили свои json файлы в каталог "your-json-dir":

1. добавьте "your-json-dir" в файл angular.json(:

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

2. разрешить импорт модулей json в файл typings.d.ts для предотвращения ошибок машинописного текста:

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

3. в вашем файле controller/service/anything else просто импортируйте файл, используя этот относительный путь:

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

Ответ 6

Я понял это.

В Angular2 у меня была папка под папкой src. В Angular4 вы должны иметь его в корневой папке.

Пример:

Angular2:

root/src/data/file.json

Angular4:

root/data/file.json

Ответ 7

Вы можете добавить местоположение своей папки в теге Assets в angular.json

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