Promise return undefined from my service

Question

I use websql to get my data from web sql

I create my controller, my model and my service :

Service

app.project.service('ProjectService', ['$webSql', 'config', function ($webSql, config) {

    var db = $webSql.openDatabase('MyApp', '1.0', 'MyApp', 2 * 1024 * 1024);

    this.getAll = function (params) {
        var projects = [];
        db.selectAll("projects").then(function(results) {
            for(var i=0; i < results.rows.length; i++){
                projects.push(results.rows.item(i));
            }
            return projects;
        })
    };

    this.create = function (project) {
        return db.insert('projects', project).then(function(results) {
            console.log(results.insertId);
        });
    };

    this.createTable = function () {
        return db.createTable('projects', {
            "id":{
                "type": "INTEGER",
                "null": "NOT NULL", // default is "NULL" (if not defined)
                "primary": true, // primary
                "auto_increment": true // auto increment
            },
            "created":{
                "type": "TIMESTAMP",
                "null": "NOT NULL",
                "default": "CURRENT_TIMESTAMP" // default value
            },
            "name":{
                "type": "TEXT",
                "null": "NOT NULL"
            },
            "path": {
                "type": "TEXT",
                "null": "NOT NULL"
            },
            "file": {
                "type": "TEXT",
                "null": "NOT NULL"
            }
        });
    };

}]);

Model

app.project.factory('Project', function (ProjectService) {

    var Project = function (properties) {
        // Model
        this.file    = null;
        this.name      = null;
        this.path  = null;
        this.is_active = null;

        angular.extend(this, properties);
    };

    Project.prototype.setModel = function (obj) {
        angular.extend(this, obj);
    };

    // With service
    // ------------------------------------------------------------------------------------------------------
    // ------------------------------------------------------------------------------------------------------

    Project.prototype.getAll = function () {
        return ProjectService.getAll();
    };

    Project.prototype.create = function (project) {
        return ProjectService.create(project);
    };

    Project.prototype.createTable = function () {
        return ProjectService.createTable();
    };

    return Project;

});

Controller

app.home.controller('HomeController', ['$scope', '$http', '$webSql', 'Project', function ($scope, $http, $webSql, Project) {

    var project = new Project();

    $scope.refresh = function(){

        new_project = {"name": 'Project1 WEB PREPROD', "path": 'project1.preprod.site.com', 'file': '/release.txt'};

        // project.createTable();

        project.create(new_project);

        $scope.projects = project.getAll();

        console.log(project.getAll());
    };

    $scope.refresh();
}]);

I can createTable and create a new object (project), but when I execute $scope.projects = project.getAll(); my console log return undefined

I tried this in my service

this.getAll = function (params) {
            var projects = [];
            db.selectAll("projects").then(function(results) {
                for(var i=0; i < results.rows.length; i++){
                    projects.push(results.rows.item(i));
                }
            }).then(function() {
                return projects;
            })
        };

But I have the same problem

Answer 1

You missed to return promise from service getAll method. Basically db.selectAll function returns a promise, which you are not returning.

this.getAll = function (params) {
    //return promise from here.
    return db.selectAll("projects").then(function(results) {
        for(var i=0; i < results.rows.length; i++){
            projects.push(results.rows.item(i));
        }
        return projects;
    })
};

and replace this :

$scope.projects = project.getAll();

by

project.getAll().then(function(results) {
    $scope.projects = results;
});