Loading JSON via $http. Works in Browser but not on Android (Device or Emulator)

Question

I just started learning ionic framework and angular js to develop an Android app. I wanted to write APOD viewer (=Astronomy Picture of the Day).

I make an API call to: https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&hd=true

which returns a JSON string. Then I view the picture (from the "hdurl" field).

everything works as expected when I try it in my browser, but when I build the app and run it in the emulator or on my phone it seems like I don't get an answer to my $http() call.

here is my code:

$scope.apodImgUrl = "img/loading.gif";
$scope.apiUrl = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&hd=true";
$http({
  method: "GET",
  url: $scope.apiUrl
}).then(function (response){
  if(response == null) {
    showError($location, "No Data", "Received nothing!");
  }else{
    if(response.data.media_type == "image") {
      $scope.apodImgUrl = response.data.hdurl;
    }else{
      showError($location, "No Image", "Only Images are Supported (so far!)");
    }
  }
},function (errorResponse) {
  showError($location, "HTTP GET Error", errorResponse);
});

I don't get an error neither the image. it just shows me my loading.gif.

I have already used the cordova whitelist plugin and added:

<access origin="*" subdomains="true"/>
<allow-navigation href="*" />
<allow-intent href="*" />

to my config.xml.

I also have tried to add a proxy to my ionic.project file:

"proxies": [
  {
    "path": "/planetary/apod",
    "proxyUrl": "https://api.nasa.gov/planetary/apod"
  }
]

I have also tried lots of different combinations how to call $http. (f.e. $http.get().success().error() or $http.get().then() or the plain $http()). with the same result.

Any ideas? Thanks.

hi @Phonolog, thanks for your reply, i am going to try it todays evening. — linluk
– linluk, Commented Jul 18, 2016 at 5:32

Hassan ALi · Accepted Answer · 2016-07-18 15:21:09Z

3

Please add whitelist plugin in your project.

cordova plugin add cordova-plugin-whitelist --save

That will enable http request in your android device. And also check your android AndroidManifest.xml.It needs this permission

<uses-permission android:name="android.permission.INTERNET" />

at the last add these lines in your config.xml

<access origin="*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>

Then your http request will work correctly thanks.

answered Jul 18, 2016 at 15:21

Hassan ALi

1,3311 gold badge27 silver badges51 bronze badges

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

2 Comments

linluk Over a year ago

hi, i tried it on a completely new project and it worked. i than analyzed the differences and it turned out that the line <plugin name="cordova-plugin-whitelist" spec="~1.2.2"/> was missing from my config.xml file. i added it and it worked! seems like ionic plugin add cordova-plugin-whitelist doesn't add it and cordova plugin add cordova-plugin-whitelist --save does. thanks a lot!

Hassan ALi Over a year ago

#linluk Thank for appreciation Bro .

furkankatman · Accepted Answer · 2017-06-16 14:49:06Z

1

I had the same problem . And after adding whitelist plugin my problem stayed the same.Finally I solved it by commenting this line <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> . This line is in index.html page .

answered Jun 16, 2017 at 14:49

furkankatman

1,21014 silver badges24 bronze badges

Collectives™ on Stack Overflow

Loading JSON via $http. Works in Browser but not on Android (Device or Emulator)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related