Ionic3でJSON（１）（外部サイトのJSONファイルを使用）

2017年5月18日

Angular 2 (, Angular 4, ionic3)に関して、以下の本を繰り返し読んでいる。

Angular2によるモダンWeb開発 Kindle版
末次 章 (著)
発売日：2017/1/18
2800円

今回は、JSONを使ってみたい。

以下のサイトを写経してみる。

Loading Remote JSON Data with HTTP in Ionic 2
BEGINNER IONIC2 VIDEO
Josh Morony · April 5, 2017
https://www.joshmorony.com/loading-remote-json-data-with-http-in-ionic-2/

（環境）
Windows8.1
Node 6.10.2
cordova 6.5.0
Ionic CLI 2.2.2
VisualStudioCode
Git 2.8.1

（０）今回は、こちらのJSONデータをとってくるらしい。。。

https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot

（１）Ionic3アプリの作成

cmd.exe（コマンドプロンプト）で、アプリを作成したい場所に移動してから、

ionic start ionic3-http blank –v2

cd ionic3-http

ionic serve

（２）HttpProviderファイルの作成

ionic g provider RedditData

（３）src/app/app.module.ts の修正。

（変更前）

（変更後）

（４）src/providers/reddit-data.ts

（変更後）

（５）src/pages/home/home.ts

（変更前）

（変更後）

http://stackoverflow.com/questions/33721276/angular-2-no-provider-for-http

src/app/app.module.ts

import { HttpModule } from '@angular/http’;

 

…….

 

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

HttpModule

],

うまくいったようであるが、これを本当は表示したいんだけど、、、

疲れたのでまた今度、、、

と思ったが、試行錯誤の結果、以下のように一応、表示はできた。理解には程遠い。。。

（６）アプリ上にJSONデータを表示。

（参考）以下のページをそのままやってもうまくいかなかったが、上記内容をもとにmodifyした。

Fetch and Parse JSON data from web service in Ionic 2 app using Angular 2
February 23, 2017  Nargis Hameed
http://www.icoderslab.com/how-to-fetch-json-data-from-web-service-in-ionic-2-app-using-angular-2/

src/pages/home/home.ts

src/pages/home/home.html

src/providers/reddit-data.ts

ふう。少しうれしい。

ソースコードは下記にアップロードした。

https://github.com/adash333/ionic3-http