ionic 3 doesn't showing data json in html

Question

l’m developing app which uses a json file it works perfectly in local server, but isn't display weather data from an API Json .

Here is the code :

RedditData.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class RedditData {
    private url : string = "http://api.wunderground.com/api/d8585d80376/lang:AR/conditions/geolookup/q/ormm.json";
    constructor(public http: HttpClient) {
        console.log('Hello RedditData Provider');
    }

    getRemoteData(){

        return this.http.get(this.url)



    }
    }

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RedditData } from '../../providers/reddit-data/reddit-data';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    weather: any={};

    constructor(public navCtrl: NavController, public redditService: RedditData) {
    }

    ionViewDidLoad(){
        this.redditService.getRemoteData()
        .subscribe(weather => {
         console.log(weather)
         this.weather.current_observation;

    });
    }

    }

the code working fine in console with out any error , but no information in html

<ion-header >
  <ion-navbar color="primary">
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding *ngIf="weather">
   <p > {{weather.observation_time}}</p>

</ion-content>

sebaferreras sebaferreras · Accepted Answer · 2018-08-29T07:11:34

You're not assigning the data to the component property:

    ionViewDidLoad(){
        this.redditService
            .getRemoteData()
            .subscribe((weather: any) => {
                 console.log(weather)
                 this.weather = weather.current_observation; // <-- here!
        });
    }

ionic 3 doesn't showing data json in html

1 Answers