Data doesn't bind on promise fulfill in node-webkit, AngularJS and mysql

Question

I am using node-webkit in conjunction with AngularJS and MySQL. I am fetching customers from MySQL DB using Node.js's mysql driver. Using $q service of angular I want to bind this to the UI which I am unable to.

HTML:

<div class="span4" ng-repeat="customer in customers">
    <p><strong>Name: </strong> {{customer.name}}</p>
    <p><strong>Address: </strong> {{customer.address}}</p>
    <p><strong>Notes: </strong> {{customer.notes}}</p>
</div>

Controller:

myApp.controller('CustomerController', 
    function CustomerController($scope, CustomerService) {
        $scope.customers = CustomerService.getAllCustomers();
});

Service:

var mysql = require('mysql');

myApp.factory('CustomerService', function($q) {
    return {
        getAllCustomers: function() {
            var deferred = $q.defer();
            var connection = get_connection();
            var query = connection.query('SELECT * from customers;', 
                function(err, customers) {
                    if (err) { console.log(err); deferred.reject(err); };
                    console.log(customers);
                    deferred.resolve(customers);
                    connection.end();
                }
            );
            console.log(query.sql);
            return deferred.promise;    
        }
    }
});

The SQL works fine and also returns the array. But UI doesn't show the data on fulfilling the promise. What am I missing?

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

In your controller:

CustomerService.getAllCustomers().then(function(customers){
  if(customers){
   $scope.customers = customers;
  }
});

The promise is not what you think it is :).

Edit: Also as I said in the comments, I wouldn't perform mysql queries directly from angularJS. Use nodeJS or other server side frameworks to do it.

Edit2: The solution this query problem in particular was to use $scope.$apply in the callback method. This has to do with the digest cycle: How do I use $scope.$watch and $scope.$apply in AngularJS?

edited May 23 '17 at 12:28

Community

1
1

answered Mar 07 '14 at 21:04

Alex C

1,334
2
18
41

Thanks for answer. Tried it but still not working. UI is still blank. – Nitin Mar 07 '14 at 21:06
@Nitin what do you get if you inspect the customers object in the controller? Also is your controller covering that html? Did you try to insert some static data to see if it diplays? – Alex C Mar 07 '14 at 21:09
This is strange, the **then** function is not even getting called though I am resolving the promise. – Nitin Mar 07 '14 at 21:13
Static content like this `$scope.customers = [ {name: '1', address: 'a', notes: 'n'}, {name: '1', address: 'a', notes: 'n'}, {name: '1', address: 'a', notes: 'n'}, {name: '1', address: 'a', notes: 'n'}]` works. Does MySQL call create problem, something like making Angular unaware of the promise being satisfied? When I return static array from the service also, it works fine. – Nitin Mar 07 '14 at 21:15
@Nitin hmm can your resolve some static data ? ie: just before `return deferred.promise;` do something like: `deferred.resolve([ { name: '...' }])`. If you can then there is a problem with how you use `connection.query`. – Alex C Mar 07 '14 at 21:20
When I resolve static data from MySQL callback it doesn't work. If I resolve with static array without MySQL, it works. But there are no errors thrown by MySQL and its success callback is always called where I am trying to resolve the promise. – Nitin Mar 07 '14 at 21:25
@Nitin I also recommend using $http and nodeJS/Rails/whatever or so to handle your mysql requests. I am not sure why you connect directly to the database via angularJS. Not sure where you get that `connection.query` from. – Alex C Mar 07 '14 at 21:28
I am using Node JS for executing mysql queries [link](https://github.com/felixge/node-mysql) – Nitin Mar 07 '14 at 21:33
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49272/discussion-between-nitin-and-alex-c) – Nitin Mar 07 '14 at 21:33

Data doesn't bind on promise fulfill in node-webkit, AngularJS and mysql

1 Answers1