ionic-frameworkhybrid-mobile-appmulti-device-hybrid-apps

How to get Data in List in Ionic hybrid application


I am beginner in Ionic hybrid development.I want to parse data in List in my project. I am using this webservice:http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt. I want to show all dates in List.This is json Responce

{ "earthquakes": [ { "datetime": "2011-03-11 04:46:23", "depth": 24.4, "lng": 142.369, "src": "us", "eqid": "c0001xgp", "magnitude": 8.8, "lat": 38.322 }, { "datetime": "2012-04-11 06:38:37", "depth": 22.9, "lng": 93.0632, "src": "us", "eqid": "c000905e", "magnitude": 8.6, "lat": 2.311 }, { "datetime": "2007-09-12 09:10:26", "depth": 30, "lng": 101.3815, "src": "us", "eqid": "2007hear", "magnitude": 8.4, "lat": -4.5172 }]}

Please suggest the tutorial or post some code its really help me. Thanks in advance


Solution

  • First, you need data provider earthquakes-provider.ts

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';
    
    @Injectable()
    export class EarthquakesProvider {
    
      constructor(public _http: Http) {
        console.log('Hello Earthquakes Provider');
      }
    
      loadEarthquakes(){
        return this._http.get('http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=bertt')
          .map(res => res.json());
      }
    
    }
    

    Second, you need page that will display your JSON data for example in home.ts

    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import { EarthquakesProvider } from '../../providers/earthquakes-provider';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html',
      providers: [EarthquakesProvider]
    })
    export class HomePage {
    
      public DateList: Array<Object>;
    
      constructor(public _navCtrl: NavController,
                  public _earthquakes: EarthquakesProvider ) {
    
           this.getEarthquakes();
    
      }
    
      getEarthquakes(){
         this._earthquakes.loadEarthquakes().subscribe(res => {
         this.DateList = res.earthquakes;
         console.log(res.earthquakes);
        });
      }
    
    }
    

    And finally home.html

    <ion-header>
      <ion-navbar>
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Show dates in List</ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content class="content-background">
    
    <ion-list>
      <button ion-item *ngFor="let item of DateList">
        {{ item.datetime }}
      </button>  
    </ion-list>
    
    </ion-content>
    

    enter image description here

    P.S. You can use MomentJS to parse, validate, manipulate, and display dates and times