Ionic get web api response with status:0

Ionic Framework ionic-v3
1

image

This is the problem I experienced from 3 days ago.
I am trying to display json data from web api which i am hosting in matesoftyo.cf.

Following the API file I have.

<?php header('Content-type: application/json'); require "data.php"; if(!empty($_GET['name'])) { $name=$_GET['name']; $price = get_price($name); if(empty($price)) { response(200,"Product Not Found",NULL); } else { response(200,"Product Found",$price); } } else { $db = new Database(); $db->connect(); $db->sql('SELECT * FROM produk'); $res = $db->getResult(); response(200,"Product Found",$res); } function response($status,$status_message,$res) { header("HTTP/1.1 ".$status_message); $response['status']=$status; $response['status_message']=$status_message; $response['results']=$res; $json_response = json_encode($response); echo $json_response; } ---------- And this is my home.ts file import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { Http } from '@angular/http'; import 'rxjs/Rx'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public people: any = []; constructor(public navCtrl: NavController, public http: Http) { this.getItem(); } getItem() { this.http.get('matesoftyo.cf') .map(res => res.json()) .subscribe( data => { this.people = data; }, err => { alert(err); } ) } }
2

is your php api returning correct response. check in browser or using any other api client like postman

4

this in postman

image
image.png1040×614 32.3 KB

this in browser

image
image.png1120×75 4.91 KB

I thought something was wrong in my API web script, because I can display json data from https://randomuser.me

can you give me script web api :frowning:

5

try this block of code…and see what’s printing on the console.

return new Promise(resolve => {
    this.http.get('matesoftyo.cf')
      .map(res => res.json())
      .subscribe(data => {
        this.data = data;
        console.log(this.data);
        resolve(this.data);
      });
  });

also make sure to have Cordova Whitelist plugin.
and add <allow-navigation href="http://*/*" /> in your config.xml file.

6

on the console.
image

7

did you install the cordova whitelist plugin?

8

done
image

9

u can get my script in here :frowning:
https://drive.google.com/open?id=0Bzs_MHhwhB7pSlpGX0JTOXp1Z1E
Help me to solve this problem :slight_smile:

10

try this and see if the response from this api is coming or not from your code…

return new Promise(resolve => {
    this.http.get('https://randomuser.me/api')
      .map(res => res.json())
      .subscribe(data => {
        this.data = data;
        console.log(this.data);
        resolve(this.data);
      });
  });

everything is same I have just used an diiferent api url to see if there is any problem with your api or with your code…if the response comes in this case then there is your problem with your api else… :slight_smile:

11

First: Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

Then from everything you posted your server is returning an error 500 - both to your app and to Postman (see in he right middle of Postman). Check the network tab of your developer tools, too.

That your webserver outputs valid data anyway is funny and strange. You should check your webserver error logs to see what is going wrong. You might want to just put a simple static .json file on the server to validate that your Ionic code is working correctly if you don’t believe me.

12

I really wish this idiom would die on its own, but it seems to be extremely resilient. There is no need to instantiate a Promise here. If all you’re trying to do is spit the response to console,

this.http.get(url).subscribe(rsp => console.log(JSON.stringify(rsp));