Geek Answers Handbook

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

I am trying to use a JSON object living in a data.json file to be a dataset for a quick prototype I'm working on. This is located in the my_project/www/data/ directory. I have an Angular service that goes and captures data in this file using $http , does some things for this, and then is used throughout my application.

I use Cordoba 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 application on my iPad, I see:

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

for an answer. I would think that if this is a relative problem with the URL, this will not work in the browser either, but it is not.

That's what I'm doing:

config.xml has the following line:

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

My service, which does a simple request preprocess, does:

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

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

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

OnComplete () is called in my browser, and onError () is called on the iPad. Any guidance?

+5
source share
6 answers

On your local developer machine, you actually start the web server when you start the ion feed. Thus, a path, for example .. /../data.json, will work because it is fully valid in the context of a web server that has full access to the file system.

If, however, you try to do the same on your device, you are likely to run into a problem because the device has security policies that prevent the ajax from going outside the root. It is not a dynamic web server, so it cannot upload files through the tree. Instead, you'll use something like a plug-in cordova to grab the contents of a file from the file system. If you prefer, you can use ngCordova to make interacting with the plugin a little less painful.

I'm 99% sure this is what happens, but you can test my theory by pointing your $ http call to some dummy .json data hosted on a public server to see if this works. Here are some dummy json data.

+5
source

Just leave it here because I had the same problem as the author of the original question. Just removing all the start slashes from the json file path in the $ http.get function, I decided to solve this problem, now loading json data works both in the browser emulator and on my Android device. The root of the $ http call url is always the index.html folder, regardless of where your controller or service is located. So use the path related to this folder and it should work. e.g. $ http.get ("data / data.json")

+6
source

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 now this 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 that you are referencing your controller.

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

Then you can use the expression to get the data

 {{ names }}

Hope this helps :)

+2
source

I also looked for this and found this question, since there is no real answer to the problem, I saved my search on the Internet and found this answer on the ion forum from ozexpert:

 var url = ""; if(ionic.Platform.isAndroid()){ url = "/android_asset/www/"; }

I used it to load a 3D model and its textures.

0
source

update: ionic 2 beta (version date August 10, 2016)

You must add the prefix to the local url as follows: prefix + 'your / local / resource'.

platform prefix:

 ios = '../www/' android = '../www/' browser = ''

we can create a urlResolver provider to complete this task.

Notice: only change the url in * .ts code to access the local resource, put it on using the remote url or in the html code. Good luck and good luck in beta.

Starter Ioner

0
source

Access to local resources is possible using $ http.get.

If the json file is in www / js / data.json. You can access using

 js/data.json

Do not use .. /js/data.json. This only works in the local browser. Using js / data.json will work both on the local browser and on the iOS device for Cordoba.

0
source

More articles:


All Articles