title: How to display json data in ionic 3
body: <p>I'm new to <code>ionic 3</code> and I would like to get a JSON with my data in my <code>ionic 3</code> 
  so I was trying to follow this tutorial:
  <a href="https://www.youtube.com/watch?v=vuc4dp0qHSc" rel="nofollow noreferrer">https://www.youtube.com/watch?v=vuc4dp0qHSc</a></p>
  
  <p>Project ionic-info:</p>
  
  <pre><code>https://prnt.sc/ft60lb
  </code></pre>
  
  <p>But I see no data in my console:</p>
  
  <pre><code>  https://prnt.sc/ft63rl
  </code></pre>
  
  <p>My project inside editor: 
  <a href="https://i.stack.imgur.com/0jyPu.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/0jyPu.jpg</a></p>
  
  <p>and here : package.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "ts-test",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "lint": "ionic-app-scripts lint",
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
      "@angular/common": "4.1.3",
      "@angular/compiler": "4.1.3",
      "@angular/compiler-cli": "4.1.3",
      "@angular/core": "4.1.3",
      "@angular/forms": "4.1.3",
      "@angular/http": "4.1.3",
      "@angular/platform-browser": "4.1.3",
      "@angular/platform-browser-dynamic": "4.1.3",
      "@ionic-native/core": "3.12.1",
      "@ionic-native/splash-screen": "3.12.1",
      "@ionic-native/status-bar": "3.12.1",
      "@ionic/storage": "2.0.1",
      "ionic-angular": "3.5.0",
      "ionicons": "3.0.0",
      "rxjs": "5.4.0",
      "sw-toolbox": "3.6.0",
      "zone.js": "0.8.12"
    },
    "devDependencies": {
      "@ionic/app-scripts": "1.3.12",
      "@ionic/cli-plugin-ionic-angular": "1.3.1",
      "typescript": "2.3.4"
    },
    "description": "An Ionic project"
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here reddit-data.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  /*
    Generated class for the RedditDataProvider provider.
  
    See https://angular.io/docs/ts/latest/guide/dependency-injection.html
    for more info on providers and Angular DI.
  */
  @Injectable()
  export class RedditDataProvider {
  
    constructor(public http: Http) {
      console.log('Hello RedditDataProvider Provider');
  
    }
  getRemoteData(){
    this.http.get('https://www.reddit.com/r/gifs/top/.json?limit=10&amp;sort=hot').map(res=&gt;res.json()).subscribe(data =&gt; {
      console.log(data);
    });
  }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>here : app.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { NgModule, ErrorHandler } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
  import { MyApp } from './app.component';
  
  import { AboutPage } from '../pages/about/about';
  import { ContactPage } from '../pages/contact/contact';
  import { HomePage } from '../pages/home/home';
  import { TabsPage } from '../pages/tabs/tabs';
  
  import { StatusBar } from '@ionic-native/status-bar';
  import { SplashScreen } from '@ionic-native/splash-screen';
  import { RedditDataProvider } from '../providers/reddit-data/reddit-data';
  import { HttpModule } from '@angular/http';
  
  
  @NgModule({
    declarations: [
      MyApp,
      AboutPage,
      ContactPage,
      HomePage,
      TabsPage
    ],
    imports: [
  
      BrowserModule,
        HttpModule,
      IonicModule.forRoot(MyApp)
  
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp,
      AboutPage,
      ContactPage,
      HomePage,
      TabsPage
    ],
    providers: [
  
      StatusBar,
      SplashScreen,
      {provide: ErrorHandler, useClass: IonicErrorHandler},
      RedditDataProvider
    ]
  })
  export class AppModule {}</code></pre>
  </div>
  </div>
  </p>
  
  <p>here : home.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { RedditDataProvider } from '../../providers/reddit-data/reddit-data';
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
    constructor(public navCtrl: NavController,public redditService:RedditDataProvider) {
  
    }
  ionicViewDidLoad(){
  
    this.redditService.getRemoteData();
  
  }
  }</code></pre>
  </div>
  </div>
  </p>