web-dev-qa-db-ja.com

Angular 2でJSONファイルを取得する方法

私がAngularに慣れていないので、angular 2を使用してJSONファイルデータをロードする簡単な解決策を誰でも教えてください。

私のコードは以下のようなものです

Index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app.component.ts

import {Component} from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `
          <div id="main">
            Main Div
               <div id = "header"></div>
               <div id = "content">
                  <ul class="games">
                      <li>
                                                                                        
                      </li>
                  </ul>
               </div>
          </div>
                 `
})
export class AppComponent {
 }

games.json

{
        "games":[
                {
                        "title":"Primary Operations",
                        "enabled":true
                },
                {
                        "title":"Curated Games",
                        "enabled":false
                }
        ]
}

App.component.tsで、games.jsonのすべてのゲームをliに取得したいのですが、詳細にアドバイスしてください。

前もって感謝します

jsonangular
33
Vishu

JSONを解析するコードの一部を次に示します。これは役に立つかもしれません：

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

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

     }
}
57
Bünyamin Sarıgül

JsonファイルをAssets（app dirと並行）ディレクトリーに保持します

Ng new YourAppnameで生成した場合、この資産ディレクトリは「app」ディレクトリと同じ行に存在し、サービスはappディレクトリの子ディレクトリである必要があります。次のようになります。

:: app/services/myservice.ts

getOrderSummary(): Observable {
    // get users from api
    return this.http.get('assets/ordersummary.json')//, options)
        .map((response: Response) => {
            console.log("mock data" + response.json());
            return response.json();
        }
    )
    .catch(this.handleError);
}
37
HydTechie

Angular-cliを使用している場合jsonファイルをAssetsフォルダー（app dirと並行）ディレクトリー内に保持します

return this.http.get('<json file path inside assets folder>.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

注：ここでは、assets/json/oldjson.jsonなどのassetフォルダー内のパスのみを指定する必要があり、次に/json/oldjson.jsonのようなパスを記述する必要があります。

Webpackを使用している場合、パブリックフォルダー内の上記の同じ構造に従う必要があります。これは、アセットフォルダーに似ています。

11
Vijay Gajera

Angular 5

あなたは言うことができます

this.http.get<Example>('assets/example.json')

これにより、Observable<Example>が得られます

8
Jana

HttpClientは必要ありません。Angularも必要ありません。必要なのはWebPackとJSON-Loaderのみです。どちらも既にAngular-CLIの一部です。

必要なコードはすべて次の行です。

import * as someName from './somePath/someFile.json;

そして、json-dataはsomeName.defaultの下にあります。ただし、このコードはTypeScriptコンパイラから型エラーをスローします-これは実際のエラーではなく、型エラーのみです。

解決するには、このコードをsrc/typings.d.tsファイルに追加します（存在しない場合は作成します）：

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

ご注意ください：このメソッドで作業すると、ビルド時にjson（minify/uglify）がアプリバンドルにコンパイルされます。これは、httpClient.get(...)で作業することを選択した場合と同様に、このファイルがロードされるまで待つ必要がないことを意味します。

7
Gil Epshtain

それを取得するには、HTTPgames.jsonを呼び出す必要があります。何かのようなもの：

this.http.get(./app/resources/games.json).map
6
John Baird

アセットフォルダはパブリックだと思います。ブラウザから直接アクセスできます

http：// localhost：4020/assets /

他のプライベートフォルダーとは異なり、jsonファイルをアセットフォルダーにドロップします

3
Anthony Agbator
service.service.ts
--------------------------------------------------------------

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

@Injectable({
  providedIn: 'root'
})
export class ServiceService {
 private url="some URL";

constructor(private http:Http) { }     

//getData() is a method to fetch the data from web api or json file

getData(){
           getData(){
          return this.http.get(this.url)
            .map((response:Response)=>response.json())
        }
          }
}






display.component.ts
--------------------------------------------

//このコンポーネントでは、suscribe（）を使用してデータを取得し、ローカルオブジェクトにdataObjectとして保存し、{{dataObject .propertyName}}のようなdisplay.component.htmlにデータを表示します。

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/service.service';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
      dataObject :any={};
constructor(private service:ServiceService) { }

  ngOnInit() {
    this.service.getData()
      .subscribe(resData=>this.dataObject =resData)
}
}
1
Raviraj S Kharvi

設定ファイルを同期的にロードする必要がありましたが、これが私の解決策でした：

export function InitConfig(config: AppConfig) { return () => config.load(); }

import { Injectable } from '@angular/core';

@Injectable()
export class AppConfig {
    Settings: ISettings;

    constructor() { }

    load() {
        return new Promise((resolve) => {
            this.Settings = this.httpGet('assets/clientsettings.json');
            resolve(true);
        });
    }

    httpGet(theUrl): ISettings {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.open( 'GET', theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse(xmlHttp.responseText);
    }
}

これは、アプリケーションの残りの前にロードされるapp_initializerとして提供されます。

app.module.ts

{
      provide: APP_INITIALIZER,
      useFactory: InitConfig,
      deps: [AppConfig],
      multi: true
    },
0
jonas