Reading data from ExpressJS server for display in pipe / ajax plugin angular-smart-table
What am I trying to do? I am trying to learn Javascript and MEAN stack by developing a simple web application. In this application, I am trying to use the "plug / ajax plugin" from angular-smart-table in a web application with the following specifications: Client side: AngularJS Server side: ExpressJS / NodeJS (Created using the Yoman generator generator - angular-fullstack ")
Challenge I ran into: I am copying / pasting the pipe / ajax plugin example provided in the smart table documentation in my web app. In this example, the values will be displayed in a smart table on the client side (factory). I want to move these values to a server controller file (smartTableServer.controller.js in plunker) accessible via the $ http.get ('/ api / smartTableServer') REST API endpoint.
What have I achieved so far in this? I was able to successfully read data from the server controller file into the client factory file (smartTableClient.service.js). However, when I store it in a variable (randomsItems), the value of the variable is "undefined". I believe the http get call is done later and hence the randomsItems variable still doesn't get any value from the server. Could you please help me to solve this problem? (i.e. get the randomsItems value from the JS server controller and display it in the view.
Plunker for my files related to this issue:
`angular.module('myApp').factory('Resource', ['$q', '$filter', '$timeout', '$http', function ($q, $filter, $timeout, $http) {
//this would be the service to call your server, a standard bridge between your model an $http
// the database (normally on your server)
function getrandomsItems() {
var defer = $q.defer();
$http.get('/api/smartTableServer', { cache: 'true'}).success(
function(randomsItems) {
defer.resolve(randomsItems);
//randomsItems = angular.fromJson(randomsItems);
//console.log("Success - randomsItems : " + randomsItems);
//console.log("Success - randomsItems.Stringify : " + JSON.stringify(randomsItems));
return defer.promise;
}
);
return defer.promise;
}
function getPage(start, number, params) {
var randomsItems = getrandomsItems(); // This method call returns the value as undefined!!!
... `
http://plnkr.co/edit/jRdNXuVMrWaymLnxfPnE?p=catalogue
Please note: I still don't know how asynchronous scripting works, and therefore don't know to defer and promise the concepts that I think are the reason I ran into the above problem. I am still learning the basics. Be sure to help.
source to share
function getRandomItems()
should execute a callback which should be called inside the method success
$http.get('/api/smartTableServer', { cache: 'true'})
promise
:
function getRandomItems(cb) {
$http.get('/api/smartTableServer', {cache: 'true'})
.success(function(randomItems) { cb(randomItems); });
}
function getPage(start, number, params) {
getRandomItems(function cb(randomItems) {
// do what you want to do with randomItems
};
)
Alternatively return promise
from function getRandomItems()
and:
function getRandomItems(cb) {
return $http.get('/api/smartTableServer', {cache: 'true'});
}
function getPage(start, number, params) {
getRandomItems.success(function(randomItems) {
// do what you want to do with randomItems
};
)
More details here: $ http General Usage
source to share