Mohanasundaram Veeramuthu Mohanasundaram Veeramuthu - 3 months ago 44x
Ajax Question

Read data from ExpressJS server to display in pipe/ajax plugin of angular-smart-table

What I'm trying to do?
I'm trying to learn Javascript & MEAN stack by developing a simple web application. In that application, I'm trying to use the "pipe/ajax plugin" of angular-smart-table in Web app with the below specs:
Client-side: AngularJS
Server-side: ExpressJS/NodeJS
(Created using Yeoman generator "generator-angular-fullstack")

Challenge that I'm facing:
I copy/pasted the pipe/ajax plugin example given in the smart table documentation in my web app. This example has the values to be displayed in the smart table in the client side (factory). I want to move these values to a server controller file (smartTableServer.controller.js in the plunker) accessible through the REST API endpoint $http.get('/api/smartTableServer').

What I have achieved till now in this?
I was able to successfully read the 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 executed later & hence the variable randomsItems still did not get the value from the server. Can you please help me to resolve this issue? (i.e.) Get the value of randomsItems from server controller JS & display it in the view.

Plunker for my files relevant to this problem:

`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) {


//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!!!
... `

Please note:
I still don't know how asynchronous scripting works & hence don't know defer & promise concepts which I think is the reason that I'm facing the above mentioned issue. I'm still learning the basics.Kindly help.

krl krl

function getRandomItems() must take a callback that must be called inside success method of $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 a 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 docs here: $http General usage