質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
RxJS

RxJSは、Observablesを用いたリアクティブプログラミングのJavaScript向けの実装です。イベント駆動処理も含めた非同期処理を高い可読性を持って容易にコーディングできます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

13981閲覧

angularにて内部jsonファイルの読み込みについて

YoshiYoshi

総合スコア17

RxJS

RxJSは、Observablesを用いたリアクティブプログラミングのJavaScript向けの実装です。イベント駆動処理も含めた非同期処理を高い可読性を持って容易にコーディングできます。

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2017/09/09 23:07

http通信にてjsonファイルの読み込みができず、ご教示いただければ幸いです。
モジュールの読み込みをしてHTTP通信用にサービスを追加。コンポーネントで呼び出してコンソールログ表示させるだけなのですが、なぜがファイルが見つからない。
ファイルパスを散々変えてはやっていますが、解決にいたらず。
以上、よろしくお願いします。

○コンソールのエラー内容
エラー画面

参考の写経先は
https://www.youtube.com/watch?v=8UOKgXr2I30&t=323s

○ファイル構造

tree

1├── app 2│   ├── app.component.css 3│   ├── app.component.html 4│   ├── app.component.spec.ts 5│   ├── app.component.ts 6│   ├── app.module.ts 7│   └── my-data.service.ts 8├── assets 9├── data 10│   └── student.json 11├── environments 12│   ├── environment.prod.ts 13│   └── environment.ts 14├── favicon.ico 15├── index.html 16├── main.ts 17├── polyfills.ts 18├── styles.css 19├── test.ts 20├── tsconfig.app.json 21├── tsconfig.spec.json 22└── typings.d.ts 23

app.module.ts

typescript

1import { BrowserModule } from '@angular/platform-browser'; 2import { NgModule } from '@angular/core'; 3 4import { AppComponent } from './app.component'; 5import {HttpModule} from '@angular/http'; 6import {MyDataService} from './my-data.service'; 7 8@NgModule({ 9 declarations: [ 10 AppComponent 11 ], 12 imports: [ 13 BrowserModule, HttpModule 14 ], 15 providers: [MyDataService], 16 bootstrap: [AppComponent] 17}) 18export class AppModule { }

app.component.ts

typescript

1import {Component, OnInit} from '@angular/core'; 2import {MyDataService} from './my-data.service'; 3 4 5@Component({ 6 selector: 'app-root', 7 templateUrl: './app.component.html', 8 styleUrls: ['./app.component.css'] 9}) 10export class AppComponent implements OnInit { 11 title = 'app'; 12 13 14 constructor(private newService: MyDataService) { 15 } 16 17 ngOnInit() { 18 19 this.newService.fetchData() 20 21 } 22}

my-data.service.ts

typescript

1import {Injectable} from '@angular/core'; 2import {Http} from '@angular/http'; 3 4@Injectable() 5export class MyDataService { 6 private url = './src/data/student.json'; 7 8 constructor(private http: Http) { 9 } 10 11 fetchData() { 12 this.http.get(this.url).subscribe( 13 (data) => console.log(data) 14 ) 15 } 16 17 18}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

youtubeのコメントでも404になるという質問が出ているので、その回答のようにすると動作するでしょう。

  1. Place your files in assets/students.json
  2. Use the reference as Assets
this.http.get('assets/students.json')

これはng buildしてみるとわかりやすいです。
ビルド結果にsrc/data/students.jsonというファイルは含まれていないことから、404になるのはしかたないですね。
ビルドにどのようなファイルを含めるかは.angular-cli.jsonに記述します。
ngコマンドで作ると

"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ],

という内容で出力されています。
この場合はassetsディレクトリ以下のファイルとfavicon.icoしか含まれません。
他のファイルも対象にしたい場合は記述を追加する必要があります。

投稿2017/09/10 02:34

shimitei

総合スコア799

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YoshiYoshi

2017/09/10 09:21

ありがとうございます。無事に解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問