Use local json file with Cordova/ionic/Angular. Works in browser, but not on device?

Question

I'm attempting to use a JSON object living in a data.json file to be the dataset for a quick prototype I'm working on. This lives in a my_project/www/data/ directory. I have an Angular service that goes and grabs the data within this file using $http, does some stuff to it, and then it's used throughout my app.

I'm using Cordova and Ionic. When using ionic serve on my computer, everything looks perfect in the browser. However, when using ionic view (http://view.ionic.io/) and opening the app on my iPad, I see a:

{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"../data/items.json","headers":{"Accept":"application/json,test/plain,*/*}},"statusText":""}

for a response. I would think that if it were a relative URL issue, that it would also not work in the browser, but that is not the case.

Here's what I'm doing:

config.xml has this line:

<access origin="*" subdomains="true"/>

My service that preforms the simple request is doing:

return $http.get("../data/data.json").then(function (response) {
    return response.data;
});

And finally, in my controller, I ask for the service to preform the request:

 myService.goGetData().then(onComplete, onError);

In my browser, onComplete() is invoked and on the iPad, onError() is invoked. Any guidance?

Answer 1

On your local developer machine you're actually running a webserver when you run ionic serve. So a path like ../../data.json will work because it is totally valid in the context of the webserver that has complete filesystem access.

If, however, you try to do the same thing on your device, you're probably going to run into an issue because the device has security policies in place that don't allow ajax to traverse up outside of the root. It is not a dynamic webserver so it can't load files up the tree. Instead you'd use something like the cordova file plugin to grab the file contents from the filesystem. If you prefer, you can use ngCordova to make interacting with the plugin a bit less painful.

I am 99% sure this is what is happening but you can test my theory by pointing your $http call to some dummy .json data hosted on a publicly available server to see if it works. Here is some dummy json data.

Answer 2

Just gonna leave this here because I had the same problem as the original question author. Simply removing any starting slashes from the json file path in the $http.get function solved this problem for me, now loading the json data works both in the browser emulator and on my android device. The root of the $http call url seems to always be the index.html folder no matter where your controller or service is located. So use a path relative from that folder and it should work. like $http.get("data/data.json")

Answer 3

So this is an example json file. save it as data.json

 [
        {
         "Name" : "Sabba",
         "City" : "London",
          "Country" : "UK"
        },
       {
         "Name" : "Tom",
         "City" : "NY",
         "Country" : "USA"
       }
     ]

And this this is what a example controller looks like

 var app = angular.module('myApp', ['ionic']);
    app.controller('ExhibitionTabCtrl', ['$scope', '$http', function($scope,$http) {
      $http.get("your/path/from/index/data.json")
      .success(function (response) 
      {
       $scope.names = response;
      });
    }]);

Then in your template make sure you are you are referencing your controller.

  <ion-content class="padding" ng-controller="ExhibitionTabCtrl">

You should then be able to use the a expression to get the data

{{ names }}

Hope this helps :)