Using Http to Fetch Remote Data from a Server in Ionic 2

Question

I am just trying out this example to learn more about ionic 2. I just want to fetch and display the data in my ionic app.I am using mySQL database and PHP.When i run ionic serve, the data is fetched without any errors but i am just getting empty homepage. I have added my home.ts..,home.html and test.php file. Can anyone suggest me what am i doing wrong ? Thank you.

HOME.ts

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

 @Component({
 selector: 'page-home',
 templateUrl: 'home.html'
 })
 export class HomePage {
 posts: any;
 constructor(public http: Http ) {
 this.http.get('http://192.000.00.000/test.php').map(res =>     res.json()).subscribe(data => {
    this.posts = data.data.children;
},

 err => {
    console.log("Oops!");
});
}
}

 home.html

 <ion-header>
 <ion-navbar>
 <ion-title>Home Page</ion-title>
 </ion-navbar>
 </ion-header>

 <ion-content class="home page" >
 <ion-list>
 <ion-item *ngFor="let post of posts">
 <img [src]="post.data.url" />
 </ion-item>
 </ion-list>
 </ion-content>

 test.php

  <?php
  $output = array(
    'success'=>'yes',
    'data'=>555
    );

  echo json_encode($output);
  ?>

this.posts = data.data.children;.. your data does not have children property.. so posts is undefined. — Suraj Rao
– Suraj Rao, Commented Apr 4, 2017 at 11:52

Patrick · Accepted Answer · 2017-04-04 13:49:37Z

1

Your output from your php script would be

{
  "success": "yes",
  "data": 555
}

In your subscribe method you try to access data.data.children. Since 555 is not an object with a property named children your posts variable will be undefined.

Therefore your page is home.html page is displaying the "correct" data.

I'm not that familiar with PHP since I don't have a parser handy, but try to output a value that has a children property instead

$output = array(
'success'=>'yes',
'data'=>array(
  'children'=>array(
    array('data'=>array('url'=>'http://www.example.com'))
  ))
);

answered Apr 4, 2017 at 13:49

Patrick

18k6 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Http to Fetch Remote Data from a Server in Ionic 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related