Nikush
Nikush

Reputation: 454

Most efficient way to store and restore JSON to this Ionic App?

I am very new to AngularJS and Ionic development, am wondering how to properly and efficiently store JSON data and restore it upon closing and opening the app.

The app I am trying to make is a simple To-Do list app. I have a list named tasks that is in JSON format that can be added/removed to and from by the user. I want to save their to-do list, as right now the app resets after re-opening.

Here is the app.js of the app I am making, and the tasks JSON data I want to save and restore is at the bottom in the TaskService service.

// Ionic Checklist App
angular.module('checklist', ['ionic'])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('TasksCtrl', function ($scope, $ionicModal, TaskService) {
    $scope.tasks = TaskService.getTasks();

    $ionicModal.fromTemplateUrl('newTaskModal',
        {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function (modal) {
            $scope.modal = modal;
        });

    $scope.openNewTask = function () {
        $scope.modal.show();
    }

    $scope.closeNewTask = function () {
        $scope.modal.hide();
    }

    $scope.newTaskInput = {
        taskName: '',
        taskComments: ''
    }

    $scope.newTask = function () {
        console.log($scope.newTaskInput.taskName);
        TaskService.makeTask($scope.newTaskInput.taskName, $scope.newTaskInput.taskComments);
        $scope.closeNewTask();
    }

    $scope.deleteTask = function (task) {
        console.log(TaskService.getTasks());
        TaskService.deleteTask(task);
    }

})

.controller('TaskDetailCtrl', function ($scope, $stateParams, TaskService) {
    $scope.taskId = $stateParams.taskId;
    $scope.task = TaskService.getTask($scope.taskId);
})

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.navBar.alignTitle('center');

    $stateProvider
        .state('tasks', {
            url: '/',
            templateUrl: 'tasks',
            controller: 'TasksCtrl'
        })
        .state('taskDetail', {
            url: '/:taskId',
            templateUrl: 'taskDetail',
            controller: 'TaskDetailCtrl'
        });

    $urlRouterProvider.otherwise("/");

})

.service('TaskService', function () {
    return {

        //Sample Tasks
        /*tasks: [
        {
            id: '1',
            name: 'Milk',
            comment: 'get it from the Frick Park Market'
        }, 
        {
            id: '2',
            name: 'Eggs',
            comment: 'get from chicken'
        }
        ],*/

        tasks: [],
        makeTask: function(name, comment) {
            var newId = this.tasks.length + 1;
            this.tasks.unshift({
                id: newId,
                name: name,
                comment: comment
            });
        },
        deleteTask: function (task) {
            console.log(task);
            console.log(this.tasks);
            console.log(this.tasks.indexOf(task));
            this.tasks.splice(this.tasks.indexOf(task), 1);
            for (i = 0; i < this.tasks.length; i++) {
                this.tasks[i].id = i+1;
            };
        },
        getTasks: function() {
            return this.tasks;
        },
        getTask: function (taskId) {

            for (i = 0; i < this.tasks.length; i++) {

                if (this.tasks[i].id == taskId) {
                    return this.tasks[i];
                }

            }

        }
    }
})

Upvotes: 2

Views: 146

Answers (1)

Niall Maher
Niall Maher

Reputation: 365

If you don't want to use a database the best thing is to use something like this https://github.com/simonlast/node-persist

Install node-persist with NPM would prob be the easiest.

Here's a sample from the GitHub :

var storage = require('node-persist');

//you must first call storage.init or storage.initSync
storage.initSync();

//then start using it
storage.setItem('name','yourname');
console.log(storage.getItem('name'));

var batman = {
    first: 'Bruce',
    last: 'Wayne',
    alias: 'Batman'
};

storage.setItem('batman',batman);
console.log(storage.getItem('batman').alias);

Basically this writes to the file instead of just in the browser

Upvotes: 1

Related Questions