How can a json file read in Android using Ionic and AngularJS Frameworks?

Question

I have a problem now regarding about the json that can't be read in my android..

the json file is where my data is place..it act as an static database..

I can get it with my Desktop but when it come to my mobile it didn't show..

Here is my sample code:

Here is my Services to get my json file..

var serviceUrl = '/';
$http.get(serviceUrl + 'JSON/Books.json').success(function (results) {
    $scope.New = results;
});

Please help me to solve this problem.. my idea about the problem is the serviceUrl . Any idea about it. Thank you so much.. Im definitely a beginner for this Ionic Framework.

Answer 1

To all who still in this problem I just find something that solve it. I don't know if it will solve in your problem but it really solve in me.. I use file:///android_asset/www/ as my serviceUrl

So this is an example:

var serviceUrl = 'file:///android_asset/www/';
$http.get(serviceUrl + 'JSON/Books.json').success(function (results) {
    $scope.New = results;
});

Just try it and explore to it.. i just tried that one and it worked in me..

Maybe the reason is the all the json file in your apk installer will be placed in file:///android_asset/www/json directory in android phone so let your url point to that directory..

I hope it will help you and explore in it..that might not be the correct answer but i hope it will help you find the hint.

Thank you

Answer 2

Starting the serviceUrl with a '/' makes it an absolute URL. It will work in chrome since the root is the www folder. But in cordova mobile environment it will translate to file:/// . Simply add a '.' ('./') to make it a relative path and it will work in both android and ios environments.

Answer 3

another easy way is to turn your json file into a javascript file, (for static files if you want to update use something like pouchdb).

eg save the json document as myjsondata.js

var mynamespace = mynamespace || {};
mynamespace.data = [{"foo":"bar"}];

then reference the javascript file in you main page where you load all the other js files

<script src="js/myjsondata.js"></script>

then in your service you can just access the json with mynamespave.data

Answer 4

Based on @Datz Me answer, I've found it's way easier if you treat your application as a web server (which it is) and request your file as being served by it instead of trying to figure out how to manage the different file paths between the several builds.

Here is what I did.

I've placed my json file on

www/json/app.json

Inside it I've put

{
    "title": "Application Title",
    "icon" : "custom-icon.png"
}

And in my app controller I used the following code to read the properties:

$http.get('json/app.json').success(function (results) {
    $rootScope.title = results.title;
    $rootScope.icon = results.icon;
});

And in all my child controllers, I just need to add $rootScope as a dependency and I'm able to use

{{title}} //on headings
{{icon}} //to display the image path
<img src="{{icon}}"/> //to display the icon

In my case, it's an app that will be customised for several clients, so I needed a way to quickly change the app's properties and keep them in one place.