web-dev-qa-db-ja.com

角度4：ローカルJSONにアクセスする方法は？

Angular2では、フォルダー/ data /とそこにjsonファイルを作成し、localhost：4200/data/something.jsonでアクセスできます。

これはAngular4ではもはや不可能です。

それを機能させる方法はありますか？

javascriptjsonangular
15
Dan Neciu

このコードを使用できます

@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ファイルです。

こちらもご覧ください

パスのangle-cliのchanglogも参照してください

11
Pardeep Jain

もちろん可能です。ここにあなたのjsonファイルがあると仮定しましょう

enter image description here


そして、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;
      });
   }  
}
9
Vivek Shukla

Observable Angularサービスが 'src/app /'フォルダー内にあり、ローカルJSONファイルをロードしようとしていた同じ問題に直面していました。JSONファイルを配置しようとしました同じアプリフォルダー内、新しい「api」フォルダー内で、さまざまな種類の親族/絶対ルートを使用しましたが、役に立たず、404エラーが発生しました。「assets」フォルダーに入れた瞬間、動作しました。それ以上のものがあると思いますか？

たぶんこのリンクは役立ちます：

角のコンポーネント相対パス

7
Deepak Pathak

「require」も使用できます。

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

これに基づいて post 、ここにAngular 6+：

angular-cli doc から、jsonはアセットと見なされ、ajaxリクエストを使用せずに標準インポートからアクセスできます。

Jsonファイルを「your-json-dir」ディレクトリに追加するとします。

  1. 「your-json-dir」をangle.jsonファイルに追加します（：

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

  2. typeson.d.tsファイルへのjsonモジュールのインポートを許可して、TypeScriptエラーを防ぎます。

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

  3. コントローラ/サービス/その他のファイルで、次の相対パスを使用してファイルをインポートします。

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

3
Benjamin Caure

Angular.jsonのAssetsタグの下にフォルダの場所を追加できます

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

私はそれを考え出した。

Angular2では、srcフォルダーの下にフォルダーがありました。 Angular4では、ルートフォルダーに配置する必要があります。

例：

Angular2：

ルート/ src/data/file.json

Angular4：

ルート/データ/ file.json

0
Dan Neciu