JSON as a database, how to implement?

ionic-v1
1

Hi,
Im trying to make my first ionic app and need a local database with JSON:

var dataBase = {
‘configs’:{
‘user’: ‘name’,
‘workHour’: ‘hour’
},
‘record’:[
{‘date’,‘hourIn’,‘hourOut’}
]
};

how do I implement JSON on ionic app?
Thanks

2

You can use localStorage. You create this local database and when you want to save it, the only thing you have to do is localStorage.setItem('db', JSON.stringify(dataBase));

To retrieve properly the database use var dataBase = JSON.parse(localStorage.getItem('db'));

1 Like
3

here you can all you need
http://learn.ionicframework.com/formulas/localstorage/

2 Likes
4

@xMarston and @Bonda thanks for the info!

I read the tutorial but I’m a little confuse, first I need to add the data base to the controller, right?

.run(function($localstorage) {
$localstorage.setObject(‘dataBase’, {
‘configs’:{
‘user’: ‘name’,
‘workHour’: ‘hour’
},
‘record’:[
{‘date’,‘hourIn’,‘hourOut’}
]};
var post = $localstorage.getObject(‘dataBase’);
console.log(dataBase);
});

And where do I use the “localStorage.setItem('db', JSON.stringify(dataBase));” ? on the html page with script tags?
Sorry, I’m a little noob about this things :smile:

Thanks

5

You don’t need to do this because you included the localstorage factory in your app that already makes that for you.

6

Hi @xMarston, now I’m understanding a little bit more.

How I add values to the database? The value will be imputed by the user with a button. The user press the button and this will add a value on the database with the date and hour.

<button class="button button-block button-positive">Click to add</button>

How can I display the values of the database?

Thanks for the help!

7

You might also want to check out lawnchair.js or (slightly more difficult) nedb which are both well-written client-side JS databases.

8

thanks @fisch :smile:
I will try lawnchair

9

If you want a basic key/value store, you should use https://github.com/mozilla/localForage. It also has an angular wrapper https://github.com/ocombe/angular-localForage. It is similar in syntax to localStorage, but is async. Also, it does all the JSON parsing and stringifying for you. Being async means that if you are reading or storing a large amount of data, instead of your app being frozen up, you can display a loader and stuff like that.

It is as simple as

$localForage.setItem('configs', {'user': 'name', 'workHour': 'hour'}).then(function() {
    $localForage.getItem('foo').then(function(data) {
        console.log(data); ///will log {'user': 'name', 'workHour': 'hour'}
    });
});
1 Like
10

hi @peey thanks for the information.

I download localForage and angular-localForage, I only have to put localForage.js on the www/js/ ionic folder? And than put on my index the code

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

Where do I define my ‘database’? on the controller?

Sorry but im noob in these kind of stuff.
Thank you once again.

11

Follow the steps closely as given in angular-localForage’s README file’s usage sections.

Also, see the example code that is provided with angular-localForage.

That should give you an idea of where to get started.

Decision of weather to ‘define your database’ in a controller or a factory depends on you, here’s what will help you make that decision:

  1. All the code in controller is run everytime the page related to the container is loaded. So if your user goes from page A to page B and then back to A and back to B several times, then all code will for controller A be run for each time page A is loaded
  2. Code in a factory loads only once per app initiation (i.e. once everytime the app is launched)
  3. You can use the methods defined in a factory across multiple controllers, so if you need

This video will give you a great introduction if you are new to angularJS, be sure to check it out!

If you are still struck after all of the above, make a codepen demo and tell me where you are struck, I’ll try to help to best of my abilities!

12

Yes, but… if the underlying storage were synchronous (as in the case of localStorage), then you could still freeze the UI while reading/writing a lot of data. localForage’s strength is cross-platform support for different storage mechanisms; the async API itself doesn’t perform miracles.

13

Yeah, forgot to mention this:
If your browser does not support WebSQL or IndexedDB, then you won’t benefit from localForage’s async nature.

But, android 2.3+ does support WebSQL, and so you are better off using localForage rather than using localStoage. I’m not sure about the iOS though.

Also, if you are not targeting a single browser but multiple browsers, as happens in the most use cases, localForage provides you with a consistent API to store data locall, and automatically uses the best storage mechanism that it can find (out of WebSQL, indexedDB, and localStorage).

So all in all, localForage is quite useful when you want key-value storage across multiple platforms consistently

14

I’m very interested in Store more than 3000 lines of a Json object in the device database. Now this ibject is hard coded as a factory, but i need to update the object over time, and i dont want to do it by updating my app. I’m thinking in using the api to transfer the object and then store the last version on the device.

I’ve read that localstorage has size limits so the localstorage or lawnchair / localforage are not options for me.
Also, i’m reading that WebSQL is not longer in maintenance (http://www.w3.org/TR/webdatabase/) and i dont want to use it either because of that.

Which might be the best solution for my problem?
Thanks in advance!

15

hey @peey how are you?

Thanks for all the information, im starting to get the idea of using angular-localForage.
my controller:

angular.module('yourModule', ['LocalForageModule'])
.controller('yourCtrl', ['$scope', '$localForage', function($scope, $localForage) {
$localForage.setItem('configs',{"user":"name","workHour":"hour","hourIn":"hour","hourOut":"hour"}).then(function() {
    $localForage.getItem('foo').then(function(data) {
        console.log(data); 
    });
});
}]);

Now Im trying to create a button to push and set the current hour to the hourIn variable but no luck:

<button ng-click="store(hourIn)">Begin</button>
<div class="ng-cloak">Value: {{ hourIn }}</div><br><br>

And how I display the values of the db “configs”?

Thanks

16

@Bonda You could use localforage as localForage gives you a localStorage like API but internally uses WebSQL or IndexedDB if they are available, which to my knowledge are available on android 2.1+.

Here’s a link that discusses various storage limits:
http://www.html5rocks.com/en/tutorials/offline/quota-research/

17

When you do {{ hourIn }}, it means that you want the value of $scope.hourIn in there. But in your controller, you are not setting $scope.hourIn. Try $scope.hourIn = 666 in your controller and you should see it.

Here’s a working example : http://jsbin.com/codisuze/9/edit?html,js,output
Click on ‘run with js’ button and you’ll see that it works!