DataApi data not found (not display in Html) in Ionic2


#1

I’m taking pictures from Json.I list the data in the Console.log.but not displayed in HTML.
Where do i make mistakes.

data-api.service.ts

import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';

import 'rxjs';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class DataApi {
  
     private url = 'http://ukopuz.com/api/5'; 
      private url1 = 'http://ukopuz.com/api/2';   // https://ionic2-9dc0a.firebaseio.com
     currentTourney : any = {};
     private tourneyData = {};
     constructor(private http:Http){
    }
      getHomeSlide(){
        return new Promise(resolve =>{
          this.http.get(`${this.url}`) 
          .subscribe(res => resolve(res.json()))
        });
      }
      
       getReferenceData(){
        return new Promise(resolve =>{
          this.http.get(`${this.url1}`) 
          .subscribe(res => resolve(res.json()))
        });
      }
        
}

references.html

<!--
  Generated template for the ReferencesPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header class="header">

   <ion-row>
    <ion-col col-1 class="back">
      <img src="assets/images/noun_884732_cc.png" (click)="back()" >
    </ion-col>
    <ion-col col-10 class="ukopuz">
       <img src="assets/images/UKOPUZ.png" (click)="kopuz()">
    </ion-col>
    <ion-col col-1 class="menu">
       <img src="assets/images/menu.png" (click)="menu()">
    </ion-col>
  </ion-row>

</ion-header>


<ion-content class="content">

   <ion-grid>
     <ion-row *ngFor="let ref of reference">
       <ion-col col-4 >
          <img src="http://ukopuz.com/{{ref}}" >
       </ion-col>
     </ion-row>
   </ion-grid>

</ion-content>

refenrences.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController } from 'ionic-angular';
import {DataApi} from '../../app/dataapi/data-api.service';
import {Http, HttpModule} from '@angular/http';
import {ModalPage} from '../modal/modal';

/**
 * Generated class for the ReferencesPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-references',
  templateUrl: 'references.html',
})
export class ReferencesPage {
 
   reference : any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public dataApi:DataApi,
  public http:HttpModule,public modalCtrl:ModalController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ReferencesPage');
     this.dataApi.getReferenceData().then(data =>
        this.reference = data);
           console.log("data:"+ this.reference );
           console.log("viewload");
  }


 
  

}


#2

So where does it brake or not work exactly?


#3

I can see the data in the console.However, the data is not listed in html
GET http://ukopuz.com/[object%20Object] 404 (Not Found).I get this error.

console.log(β€œdata:”+ this.reference); ->results
data:[{β€œ3”:"/img/ref/adana.png",β€œ4”:"/img/ref/ajans.png",β€œ5”:"/img/ref/akp.jpg",β€œ6”:"/img/ref/akp.png",β€œ7”:"/img/ref/akpgenclik.png",β€œ8”:"/img/ref/ankara.png",β€œ9”:"/img/ref/arnavut.png",β€œ10”:"/img/ref/aydin.png",β€œ11”:"/img/ref/basbakanlik.png",β€œ12”:"/img/ref/bayrampasa.png",β€œ13”:"/img/ref/best.jpg",β€œ14”:"/img/ref/beylikduzu.png",β€œ15”:"/img/ref/bursa.png",β€œ16”:"/img/ref/buyuksehir.jpg",β€œ17”:"/img/ref/carrefour.jpg",β€œ18”:"/img/ref/cevahir.png",β€œ19”:"/img/ref/corlu.png",β€œ20”:"/img/ref/cumhur.jpg",β€œ21”:"/img/ref/cumhur.png",β€œ22”:"/img/ref/dogus.png",β€œ23”:"/img/ref/esenler.png",β€œ24”:"/img/ref/etimesgut.png",β€œ25”:"/img/ref/fb.png",β€œ26”:"/img/ref/fox.jpg",β€œ27”:"/img/ref/gazi.png",β€œ28”:"/img/ref/gelisim.png",β€œ29”:"/img/ref/genclik.png",β€œ30”:"/img/ref/gungoren.png",β€œ31”:"/img/ref/heart.jpg",β€œ32”:"/img/ref/heart.png",β€œ33”:"/img/ref/ibb.png",β€œ34”:"/img/ref/igdas.jpg",β€œ35”:"/img/ref/igdas.png",β€œ36”:"/img/ref/ihl.png",β€œ37”:"/img/ref/ispark.png",β€œ38”:"/img/ref/istanbul.png",β€œ39”:"/img/ref/istanbul2010.png",β€œ40”:"/img/ref/itu.png",β€œ41”:"/img/ref/itucu.png",β€œ42”:"/img/ref/kagithane.png",β€œ43”:"/img/ref/karabuk.png",β€œ44”:"/img/ref/kimse.png",β€œ45”:"/img/ref/kral.png",β€œ46”:"/img/ref/kucukcekmece.png",β€œ47”:"/img/ref/kultur.png",β€œ48”:"/img/ref/kulturas.png",β€œ49”:"/img/ref/mhp.jpg",β€œ50”:"/img/ref/mhp.png",β€œ51”:"/img/ref/musiad.jpg",β€œ52”:"/img/ref/musiad.png",β€œ53”:"/img/ref/nidge.png",β€œ54”:"/img/ref/ntv.jpg",β€œ55”:"/img/ref/ntv.png",β€œ56”:"/img/ref/parkorman.png",β€œ57”:"/img/ref/ptt.png",β€œ58”:"/img/ref/rixos.png",β€œ59”:"/img/ref/saglik.png",β€œ60”:"/img/ref/sensation.png",β€œ61”:"/img/ref/show.jpg",β€œ62”:"/img/ref/sincan.png",β€œ63”:"/img/ref/sporas.png",β€œ64”:"/img/ref/star.png",β€œ65”:"/img/ref/tff.jpg",β€œ66”:"/img/ref/tff.png",β€œ67”:"/img/ref/thy.png",β€œ68”:"/img/ref/toki.jpg",β€œ69”:"/img/ref/toki.png",β€œ70”:"/img/ref/trend.png",β€œ71”:"/img/ref/trt.jpg",β€œ72”:"/img/ref/trt.png",β€œ73”:"/img/ref/trtmuzik.png",β€œ74”:"/img/ref/ttnet.jpg",β€œ75”:"/img/ref/ttnet.png",β€œ76”:"/img/ref/turkcell-100x100.png",β€œ77”:"/img/ref/turkcell.png",β€œ78”:"/img/ref/turktelekom.png",β€œ79”:"/img/ref/turkuvaz.png",β€œ80”:"/img/ref/ulke.jpg",β€œ81”:"/img/ref/ulker.png",β€œ82”:"/img/ref/unilever.png",β€œ83”:"/img/ref/wow.png"}]


#4

Any reason why you’re wrapping these get’s into promises? Since they return a subscribable by default…


#5

As @luukschoen said, don’t create needless Promises. Also, stop abusing any. Your main problem here is that you are telling the template to loop across something that is not an array. Initialize reference to an empty array.