Why Json data not get?

Ionic Framework ionic-v3
1

I use provider to get http from my server to load image to create slide image.
but i can’t get data from that.

getnews.php return json.

{
    "title": "http://host.com/image/title.jpg",
    "data": [
        {
            "image_url": "http://host.com/AD/AD-1.jpg"
        },
        {
            "image_url": "http://host.com/AD/AD-2.jpg"
        }
    ]
}

providers/news.ts

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

@Injectable()
export class News {
  data: any;

  constructor(private http: Http) {
  	this.data = null;
  }

  load(){
  	if(this.data){
  	   return Promise.resolve(this.data);
  	}

  	return new Promise(resolve => {
        this.http.get('http://www.host.com/getnews.php')
  	.map(res => res.json())
  	.subscribe(data => {
            this.data = data;
  	    resolve(this.data);
  	   });
  	});
  }
}

page/news.ts

import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';
import { News } from '../../providers/news/news';
@Component({
  providers: [News],
  templateUrl: 'build/pages/news/news.html',
})
export class NewsPage {
    items: any = null;
  constructor(private navCtrl: NavController, private loadingController: LoadingController, news: News) {
    this.items = news.load();
  }
}

page/news.html

<ion-slides>
	<ion-slide *ngFor="let item of items.data | async">
		<img [src]="item.image_url" class="slide-image"/>
	</ion-slide>
</ion-slides>

this error.
image

2

Can you share the code that is used in news.load()?

The issue is probably related to this.

3

OK. I shared look again.

4

try this…

 load(){
  	return this.http.get('http://www.host.com/getnews.php')
  	.map(res => res.json())
  }

Then you can use it in your class like this

  news.load().subscribe(
  (res) => {
    this.items = res;
  }
)
1 Like
5

Work!! Thank you very much.

6

Hello there I really need a hand.Could you tell me whats wrong about this code because it gives an empty array

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import {Deneme} from ‘…/…/providers/deneme’;
import { Http,Response } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import { LoadingController } from ‘ionic-angular’;

@Component({

templateUrl: ‘dic.html’,
providers:[Deneme]

})
export class DicPage {

veri=[];

constructor(public navCtrl: NavController, public navParams: NavParams,public den:Deneme,public http:Http,public load:LoadingController) {

}
ionViewDidEnter(){

let loaddd = this.load.create({
content: ‘Please wait…’
});

loaddd.present();
this.den.loading().subscribe(data => {this.veri=data},err => console.log(err),()=>{loaddd.dismiss()});
console.log(this.veri)

}}

7

This my provider

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Injectable()
export class Deneme {

constructor(public http: Http) {
console.log(‘Hello Deneme Provider’);
}

loading(){

return this.http.get(‘https://www.reddit.com/r/gifs/top/.json?limit=10&sort=hot’).map(res=>res.json());

// return this.http.get(‘assets/data/datadic.json’).map(res=>res.json());
}

}