web-dev-qa-db-ja.com

angular 2のhttp.get（）を使用してローカルファイルからjsonをロードする

angular 2.でhttp.get()を使用してローカルjsonをロードしようとしています。ここでスタックにあるものを試しました。次のようになります：

これは私の_app.module.ts_です。ここで、importHttpModuleと_@angular/http_のJsonModuleを使用します。

_import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { NavCompComponent } from './nav-comp/nav-comp.component';
import { NavItemCompComponent } from './nav-comp/nav-item-comp/nav-item-comp.component';


@NgModule({
    declarations: [
        AppComponent,
        NavCompComponent,
        NavItemCompComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot(appRoutes)
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule { }
_

私のcomponentでは、importHttpとResponseを_@angular/http_から取得しています。次に、loadNavItems()という関数があります。ここで、http.get()を使用してjsonに相対パスをロードし、console.log()を使用して結果を出力します。関数はngOnInit()で呼び出されます：

_import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
    selector: 'app-nav-comp',
    templateUrl: './nav-comp.component.html',
    styleUrls: ['./nav-comp.component.scss']
})
export class NavCompComponent implements OnInit {

    navItems: any;

    constructor(private http: Http) { }

    ngOnInit() {
        this.loadNavItems();
    }

    loadNavItems() {
        this.navItems = this.http.get("../data/navItems.json");
        console.log(this.navItems);
    }
}
_

私のローカルjsonファイルは次のようになります：

_[{
        "id": 1,
        "name": "Home",
        "routerLink": "/home-comp"
    },
    {
        "id": 2,
        "name": "Über uns",
        "routerLink": "/about-us-comp"
    },
    {
        "id": 3,
        "name": "Events",
        "routerLink": "/events-comp"
    },
    {
        "id": 4,
        "name": "Galerie",
        "routerLink": "/galery-comp"
    },
    {
        "id": 5,
        "name": "Sponsoren",
        "routerLink": "/sponsoring-comp"
    },
    {
        "id": 6,
        "name": "Kontakt",
        "routerLink": "/contact-comp"
    }
]
_

コンソールにエラーはありません、私はこの出力を取得します： enter image description here

私のhtmlテンプレートでは、次のようにアイテムをループしたいと思います。

_<app-nav-item-comp *ngFor="let item of navItems" [item]="item"></app-nav-item-comp>
_

私はここで見つけた解決策を使ってこれを作りましたが、なぜそれが機能しないのか分かりませんか？

EDIT RELATIVE PATH：相対パスにも問題がありますが、_../data/navItems.json_を使用すると、それが正しいパスであると確信しています。スクリーンショットでは、nav-comp.component.tsを使用できます。dataというフォルダーにあるjsonファイルからの相対パスを使用してjsonをロードしますか？何が問題なのですか、コンソールが404エラーを出力します。これは、相対パスからjsonファイルが見つからないためです。

enter image description here

javascripthtmljsonangularhttp
41
webta.st.ic

Angular 5 +の場合、プリフォームステップ1および4

Angular 2 +でローカルにファイルにアクセスするには、次の手順を実行する必要があります（4ステップ）：

[1]アセットフォルダ内に。jsonファイルを作成します。例：data.json

[2]に移動しますangular.cli.json（angular.json in Angular 6+）プロジェクト内およびassets配列内にパッケージの後に別のオブジェクトを配置します。このようなjsonオブジェクト）：

{"glob"： "data.json"、 "input"： "./"、 "output"： "./assets/"}

angular.cli.jsonの完全な例

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        { "glob": "package.json", "input": "../", "output": "./assets/" },
        { "glob": "data.json", "input": "./", "output": "./assets/" }
      ],

data.jsonは、assetsフォルダーに以前に追加したサンプルファイルです（ファイルには、好きな名前を付けることができます）。

[3]localhost経由でファイルにアクセスしてみます。このアドレス内で表示されるはずです http：// localhost：your_port/assets/data.json

見えない場合は、何かが間違っています。手順4に進む前に、ブラウザのURLフィールドに入力してアクセスできることを確認してください。

[4]次に、GETリクエストを実行して、。jsonファイルを取得します（フルパス。jsonURLであり、シンプルである必要があります）

 constructor(private http: HttpClient) {}
        // Make the HTTP request:
        this.http.get('http://localhost:port/assets/data.json')
                 .subscribe(data => console.log(data));
79
Eugen Sunic

あなたは変える必要があります

loadNavItems() {
        this.navItems = this.http.get("../data/navItems.json");
        console.log(this.navItems);
    }

for

loadNavItems() {
        this.navItems = this.http.get("../data/navItems.json")
                        .map(res => res.json())
                        .do(data => console.log(data));
                        //This is optional, you can remove the last line 
                        // if you don't want to log loaded json in 
                        // console.
    }

this.http.getはObservable<Response>を返し、応答は不要なので、その内容が必要です。

console.logはオブザーバブルを示しますが、これはnavItemsにObservable<Response>が含まれているため、正しいです。

テンプレートでデータを適切に取得するには、asyncパイプを使用する必要があります。

<app-nav-item-comp *ngFor="let item of navItems | async" [item]="item"></app-nav-item-comp>

これはうまく機能するはずです。詳細については、 HTTPクライアントのドキュメント を参照してください

11
Supamiu

simplestこれを達成する方法は、フォルダの下にfile.jsonを追加することであることがわかりました：アセット。

編集する必要はありません：.angular-cli.json

Service

@Injectable()
export class DataService {
  getJsonData(): Promise<any[]>{
    return this.http.get<any[]>('http://localhost:4200/assets/data.json').toPromise();
  }
}

Component

private data: any[];

constructor(private dataService: DataService) {}

ngOnInit() {
    data = [];
    this.dataService.getJsonData()
      .then( result => {
        console.log('ALL Data: ', result);
        data = result;
      })
      .catch( error => {
        console.log('Error Getting Data: ', error);
      });
  }

追加：

理想的には、これを開発環境でのみ使用して、完全に保護する必要があります。 environment.tsに変数を作成します

export const environment = {
  production: false,
  baseAPIUrl: 'http://localhost:4200/assets/data.json'
};

次に、http.getのURLを${environment.baseAPIUrl}

また、environment.prod.tsには製品APIのURLを含めることができます。

お役に立てれば！

6
T04435

リクエストのレスポンスをnavItemsに入れたい。 http.get()はオブザーバブルを返すため、サブスクライブする必要があります。

この例を見てください：

// version without map
this.http.get("../data/navItems.json")
    .subscribe((success) => {
      this.navItems = success.json();          
    });

// with map
import 'rxjs/add/operator/map'
this.http.get("../data/navItems.json")
    .map((data) => {
      return data.json();
    })
    .subscribe((success) => {
      this.navItems = success;          
    });
0
runit