Using Json in Cordova/Phonegap

I'm trying to load some data from an external JSON file, and I don't know why, but my code doesn't work.

$(document).ready(function(){

    var urlDesc = "http://www.thisurl.com/worksgood/json.php";
    $.ajax({
        type: "GET",
        dataType: "json",
        url: urlDesc,
        success: function(data){
            $.each(data, function(i,item){
                alert(item);
            });
        },
        error: function(){
            alert(urlDesc);
            alert('There was an error loading the data.');
        }
    }); 
});

The json.php returns something like this:

[{
    "color": "red",
    "size": "big"
  }, {
    "color": "white",
    "size": "small" 
}]

Answers


Have you checked the Javascript console whilst running your application on a simulator or device? If using Cordova 5 or higher, it's likely that you need to configure the Content Security Policy meta tag in your index.html to allow access to your server URL. If using iOS 9 you will also need to configure an App Transport Security exception as iOS 9 will not allow non-SSL connections by default.

If you have these issues, using Safari or Chrome remote debugger should show appropriate errors in the JavaScript console that would look something like this:

Refused to connect to '<your server url>' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

To fix this, you will need to add a Content Security Policy meta tag in the head in index.html that looks like this:

<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 *; connect-src http://www.thisurl.com">

If you are then running on iOS 9 also, you will need to modify your application's -Info.plist to configure an App Transport Security exception to allow your app to connect to your server without requiring SSL. Add something like this to the -Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
      <key>www.thisurl.com</key>
      <dict>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
    </dict>
  </dict>
</dict>

There is a detailed blog post explaining how to configure backend security for Cordova here that points to a sample app that shows you how to get this working on iOS and Android.

Additionally don't do your Ajax call before Cordova/PhoneGap raises the "deviceready" event (documentation).


Need Your Help

Is there any way to specify a bootstrap target in an ANT build file?

xml ant build bootstrapping

In my Ant build file, I'm using an encrypted property which I'm reading off a text file. I need to decrypt this in sort of a bootstrap target during my build process. How do I do this?

How to properly setup a dev server for use on intranet

.net iis networking asp-classic dns

Hold your horses, you might say this belongs on Server Fault, but I'm asking this from the perspective of a developer, not a sysadmin. I can get varied results and see where in the code it breaks (...