スポンサーリンク

Ionic3でJSON(1)(外部サイトのJSONファイルを使用)

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

(0)今回は、こちらのJSONデータをとってくるらしい。。。

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

(1)Ionic3アプリの作成

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

ionic start ionic3-http blank –v2

cd ionic3-http

ionic serve

image

image

(2)HttpProviderファイルの作成

ionic g provider RedditData

image

(3)src/app/app.module.ts の修正。

(変更前)
image

(変更後)
image

(4)src/providers/reddit-data.ts

(変更後)
image

(5)src/pages/home/home.ts

(変更前)
image

(変更後)
image

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

],

image

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

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

image

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

(6)アプリ上に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
image

src/pages/home/home.html
image

src/providers/reddit-data.ts
image

image

ふう。少しうれしい。

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

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

スポンサーリンク