Develop Reference

AngularJS / Promises / DataTables - No Data in Table

I have a controller in the provided module that uses data from either a JSON file or an API call. The JSON file version GetActionItems2() works perfectly. Unfortunately, I cannot get the GetActionItems() to work just like its counterpart function (the JSON version). I am using deferred promises and Angular DataTables. No errors in console, but my table has no data in the page.
How do I resolve this?
Controller
angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
$scope.actionitems = {};
function GetActionItems2()
{
return $resource('actionitems.json').query().$promise;
}
function GetActionItems() {
var defer = $q.defer();
$http.get('api/actionitems')
.then(function(response){
defer.resolve(response);
});
return defer.promise;
}
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
GetActionItems().then(function(result) {
$scope.actionitems = result;
defer.resolve(result);
});
return defer.promise;
})
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
}]);
Template
<div ng-init="init()" ng-controller="ActionController">
ActionItems
<table id="actionitems" class="row-border hover action" datatable="" dt-options="dtOptions">
<thead>
<tr>
<th>
ID
</th>
<th>
Action Item Title
</th>
<th>
Criticality
</th>
<th>
Assignor
</th>
<th>
Owner
</th>
<th>
Alt Owner
</th>
<th>
Approver
</th>
<th>
Assigned Date
</th>
<th>
DueDate
</th>
<th>
ECD
</th>
<th>
Completion Date
</th>
<th>
Closed Date
</th>
<th>
Team
</th>
<th>
Meeting
</th>
<th>
Phase
</th>
<th>
Source
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="actionitem in actionitems">
<td>{{actionitem.ActionItemID}}</td>
<td>{{actionitem.Title}}</td>
<td>{{actionitem.Criticality}}</td>
<td>{{actionitem.Assignor}}</td>
<td>{{actionitem.Owner}}</td>
<td>{{actionitem.AltOwner}}</td>
<td>{{actionitem.Approver}}</td>
<td>{{actionitem.AssignedDate}}</td>
<td>{{actionitem.DueDate}}</td>
<td>{{actionitem.ECD}}</td>
<td>{{actionitem.CompletionDate}}</td>
<td>{{actionitem.ClosedDate}}</td>
</tbody>
</table>
</div>

Returning $http.get('api/actionitems').then(function(result) to fromFnPromise with an embedded return result.data inside of function(result) resolved the issue and avoided usage of the deferred Anti-pattern.
$scope.init = function() {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return $http.get('api/actionitems').then(function(result) {
$.each(result.data, function(key, actionitem) {
result.data[key] = [
actionitem.actionitemid,
actionitem.actionitemtitle,
actionitem.criticality,
actionitem.assignor,
actionitem.owner,
actionitem.altowner,
actionitem.approver,
actionitem.assigneddate,
actionitem.duedate,
actionitem.ecd,
actionitem.completiondate,
actionitem.closeddate
];
});
$scope.actionitems = result.data;
return result.data;
});
})
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}

If this asynchronous processing comes from a third party, you may need to manually trigger a data update for that controller.
// ...
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
GetActionItems().then(function(result) {
$scope.actionitems = result;
// here trigger a data update
$scope.$digest();
defer.resolve(result);
});
return defer.promise;
})
// ...
The $digest method is to manually trigger the change detection of the controller.

SEE EDIT BELOW
My initial solution was a two step process to get data into my table.
I introduced a custom apply function then a getRes function which then populated array of actionitems with individual actionitems with only an array of values to be sent off to datatables and asign to a $scope.acionitems. Otherwise I would get an alert from datatables that regarding the format of each item being in JSON format with corresponding keys.
angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
$scope.actionitems = {};
function GetActionItems2()
{
return $resource('actionitems.json').query().$promise;
}
function GetActionItems() {
var defer = $q.defer();
$http.get('api/actionitems')
.then(function(response){
defer.resolve(response);
});
return defer.promise;
}
var getRes = function(res){
$.each(res, function(key, actionitem){
res[key] = [
actionitem.actionitemid,
actionitem.actionitemtitle,
actionitem.criticality,
actionitem.assignor,
actionitem.owner,
actionitem.altowner,
actionitem.approver,
actionitem.assigneddate,
actionitem.duedate,
actionitem.ecd,
actionitem.completiondate,
actionitem.closeddate
];
});
$scope.actionitems = res;
}
function apply(scope, fn, res) {
(scope.$$phase || scope.$root.$$phase) ?
fn(res) :
scope.$apply(fn(res));
}
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
var defer = $q.defer();
GetActionItems().then(function(result){
apply($scope, getRes, result.data);
defer.resolve(result.data);
});
return defer.promise;
})
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
}]);
EDIT
I simplified the code and used a resolve on the actual data attribute of result not object itself which produced data in my table.
The following modification based on my Anti-Pattern usage is the best I could get so far to achieve the same results.
angular.module('Action').controller('ActionController', ['$http', '$resource', '$scope', '$state', '$timeout', '$q', 'DTOptionsBuilder', function($http, $resource, $scope, $state, $timeout, $q, DTOptionsBuilder){
$scope.actionitems = {};
function GetActionItems2()
{
return $resource('actionitems.json').query().$promise;
}
function GetActionItems() {
var defer = $q.defer();
var res = $http.get('api/actionitems').then(function(result){
var data = result.data;
$.each(data, function(key, actionitem){
data[key] = [
actionitem.actionitemid,
actionitem.actionitemtitle,
actionitem.criticality,
actionitem.assignor,
actionitem.owner,
actionitem.altowner,
actionitem.approver,
actionitem.assigneddate,
actionitem.duedate,
actionitem.ecd,
actionitem.completiondate,
actionitem.closeddate
];
});
$scope.actionitems = data;
defer.resolve(data);
});
return defer.promise;
}
$scope.init = function(){
var vm = this;
vm.dtOptions = DTOptionsBuilder
.fromFnPromise(GetActionItems)
.withPaginationType('full_numbers')
//.withOption('drawCallback', reload)
.withDisplayLength(10)
//.withOption('order', [1, 'desc'])
.withOption('scrollY', 500)
.withOption('scrollX', '100%')
.withDOM('lftrpi')
.withScroller();
}
}]);

Angular JS Json data

I am self educating myself in angular js. For this i have created a project modelled after an actual project in my job
All get operation work fine but POST is giving me issue
My controller.js
var ngapp = angular.module('ngWebApp', ['angularUtils.directives.dirPagination']);
ngapp.controller('ngIndexController', function ($scope, ngDashboardService) {
$scope.exportData = function (selectedDataList) {
var getData = ngDashboardService.AddReportAudit(selectedDataList)
getData.then(function (result) {
alert(result.data);
}, function () {
alert('Error in getting records');
});
};
});
My service.js
angular.module('ngWebApp').service("ngDashboardService", function ($http) {
this.AddReportAudit = function (dataList) {
var response = $http({
method: "POST",
url: "/Home/AddReportAudit",
data: {
'dataList': JSON.stringify(dataList)
}
});
return response;
};
});
My code of JasonResult in HomeController
public JsonResult AddReportAudit(List<ADTOWebSMARTT_SSOData> dataList)
{
if (dataList != null)
{
using (HRMSystemEntities contextObj = new HRMSystemEntities())
{
var itemList = dataList.Where(x => x.IsChecked == true).ToList();
itemList.ForEach(a => a.DateChecked = DateTime.Now);
contextObj.SaveChanges();
return Json(new { success = true });
}
}
else
{
return Json(new { success = false });
}
}
The problem occurs here
public JsonResult AddReportAudit(List dataList)
For some reason the dataList on reaching AddReportAudit become empty i.e. list has zero element. dataList has 30 records in controller.js and service.js.
I am not sure why that is happening. is there a parsing that I am missing when json data comes from angular to c#

You are actually sending an Object, so the data that reaches your public JsonResult AddReportAudit(....isAnObject), but you are expecting it to be a list. Just change your controller code to the snippet below, it should work.
angular.module('ngWebApp').service("ngDashboardService",
function($http) {
this.AddReportAudit = function (dataList) {
var response = $http({
method: "POST",
url: "/Home/AddReportAudit",
data:JSON.stringify(dataList)
});
return response;
};
});

Solution for angular 1. Place your web service url and change the json data format as per your need. It works.
<!DOCTYPE html>
<html>
<head>
<title>Angular HTTP service</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<th>S No</th>
<th>Source Name</th>
</tr>
<tr ng-repeat="res in result">
<td>{{$index + 1}}</td>
<td>{{res.source_name}}</td>
</tr>
</table>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http){
$http.get("http://127.0.0.1:4000/all_source").then(function(res){
//console.log(res.data.result);
//console.log(res);
$scope.result = res.data.result;
});
});
</script>
</body>
</html>

Populate table data with $http.get on dropdown option selected in Angular

I am new to Angular and would like to learn how to accomplish this task below:
I have a dropdown that contains a list of table names from a database. When a table name is selected from the drop down I want to make an HTTP GET call to a web API method which returns the list of column names in the selected table.
HTML:
<div class="row">
<div ng-app="myApp">
<div class="col-lg-12">
<h1>Table Information</h1>
<hr />
<div ng-controller="TableController" class="col-lg-6">
<label>Select a Table:</label>
<select id="tablename" ng-options="table.Name for table in tables track by table.Name" ng-model="data.selectedOption" class="form-control"></select>
</div>
</div>
<div class="col-lg-12">
<h1>{{data.selectedOption}}</h1>
<hr />
<div ng-controller="TableColumnController" class="col-lg-6">
<table class="table">
<thead>
<tr>
<th>Column Name</th>
<th>Type</th>
<th>Max Characters</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tablecolumn in tablecolumns">
<td>
{{tablecolumn.Name}}
</td>
<td>
{{tablecolumn.Type}}
</td>
<td>
{{tablecolumn.MaxCharacters}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Here is my JavaScript:
var app = angular.module('myApp', []);
app.controller('TableColumnController', function ($scope, $http) {
$http.get('http://localhost:61475/api/SxTableInfo/',
{
params: {
tablename: "smsn"
}
}).
success(function (data, status, headers, config) {
$scope.tablecolumns = data;
}).
error(function (data, status, headers, config) {
alert("error!");
});
});
app.controller('TableController', function ($scope, $http) {
$http.get('http://localhost:61475/api/SxTableInfo/').
success(function (data, status, headers, config) {
$scope.tables = data;
}).
error(function (data, status, headers, config) {
alert("error!");
});
});
What is the best way to do this?
Here is just an example of what it looks like:
UPDATED CODE:
<div class="row" ng-app="myApp">
<div ng-controller="ctrl">
<div class="col-lg-12">
<h1>Table Information</h1>
<hr />
<div class="col-lg-6">
<label>Select a Table:</label>
<select id="tablename"
ng-options="table.Name for table in tables track by table.Name"
ng-model="data.selectedOption"
ng-change="getColumns(data.selectedOption)"
class="form-control"></select>
</div>
</div>
<div class="col-lg-12">
<h1>{{data.selectedOption.Name}}</h1>
<hr />
<div class="col-lg-6">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Column Name</th>
<th>Type</th>
<th>Max Characters</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tablecolumn in tablecolumns">
<td>
{{tablecolumn.Name}}
</td>
<td>
{{tablecolumn.Type}}
</td>
<td>
{{tablecolumn.MaxCharacters}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
#section Scripts{
<script>
var app = angular.module('myApp', []);
app.factory('tableService', ['$http', function ($http) {
function getColumns(selection) {
$http.get('http://localhost:61475/api/SxTableInfo/', { params: { tablename: selection } }).success(function (data) {
return data;
});
}
function getTables() {
$http.get('http://localhost:61475/api/SxTableInfo/').success(function (data) {
return data;
});
}
return { getColumns: getColumns, getTables: getTables }
}]);
app.controller('ctrl', ['$http', '$scope', 'tableService', function ($http, $scope, tableService) {
$scope.tables = tableService.getTables();
$scope.getColumns = function (selection) {
$scope.tablecolumns = tableService.getColumns(selection.Name);
}
}]);
</script>
}

No need for multiple controllers, and you'll need to bind to ngChange. Observe the following example, specifically, the binding to getStuff...
<select
id="tablename"
ng-options="table.Name for table in tables track by table.Name"
ng-model="data.selectedOption"
ng-change="getStuff(data.selectedOption)"
class="form-control">
</select>
app.controller('ctrl', function ($scope, $http) {
$scope.getStuff = function(selection) {
$http.get('http://localhost:61475/api/SxTableInfo/', {
params: { tablename: selection }
})
.success(function (data, status, headers, config) {
$scope.tablecolumns = data;
});
}
}
I would recommend moving this logic into an injectable service, most likely your next step. Something like...
app.factory('TableService', ['$http', function($http) {
function getMetaData(selection) {
$http.get('http://localhost:61475/api/SxTableInfo/', { params: { tablename: selection } }
}
return { getMetaData: getMetaData }
}]);
app.controller('ctrl', ['$scope', 'TableService', function ($scope, TableService) {
$scope.getStuff = function(selection) {
TableService.getMetaData(selection).then(function(response) {
$scope.tablecolumns = response.data;
});
}
}]);
Plunker Link - simplified demo
Edit per your example and updated code, give this a shot...
app.controller('ctrl',...
tableService.getTables().then(function(response) {
$scope.tables = response.data;
});
$scope.getColumns = function (selection) {
tableService.getColumns(selection.Name).then(function(response) {
$scope.tablecolumns = response.data
});
}

You should not use two controllers for this purpose, instead you can use a service or factory for $https request to get you data from the server.
You should also use ng-change to invoke table column name info call
Try this
in app.js
var app = angular.module('plunker', []);
app.factory('userFactory', ['$http', function($http) {
var dataFactory = {};
dataFactory.getTableNames = function() {
/*$http.get('http://localhost:61475/api/SxTableInfo/').
success(function (data, status, headers, config) {
$scope.tables = data;
}).
error(function (data, status, headers, config) {
alert("error!");
});*/
data = [{
id: 1,
tableName: 'table1'
}, {
id: 2,
tableName: 'table2'
}, {
id: 3,
tableName: 'table3'
}];
return data;
}
dataFactory.getColumnNames = function() {
alert('implement your logic here . ');
/* $http.get('http://localhost:61475/api/SxTableInfo/',
{
params: {
tablename: "smsn"
}
}).
success(function (data, status, headers, config) {
$scope.tablecolumns = data;
}).
error(function (data, status, headers, config) {
alert("error!");
});*/
}
return dataFactory;
}]);
app.controller('MainCtrl', ['$scope', 'userFactory', function($scope, userFactory) {
$scope.name = 'World';
$scope.items = userFactory.getTableNames();
$scope.getColumnNames= function(){
userFactory.getColumnNames();
}
}]);
in HTML,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<select ng-change="getColumnNames()" ng-model="selectedItem" ng-options="item.tableName as item.tableName for item in items"></select>
</body>
</html>
Plunker link for the same.

error when injecting service in controller

I am trying to consume Web API using AngularJs but getting struck angular side which is hard for me to figure out.
I created HTML, controller and service. Everything seems ok to me but when running the app i get the injection error.
html
<html >
<head>
<title>Motors </title>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/View/motorController.js"></script>
</head>
<body ng-app="myApp" ng-controller="motorController">
<div>
<table class="table">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="m in motors">
<td>{{m.Id}}</td>
<td>{{m.Name}}</td>
<td>{{m.Country}}</td>
</tr>
</table>
</div>
</body>
</html>
AngularJs controller
var module = angular.module('myApp', [])
.controller('motorController', ['$scope', '$motorService',function ($scope, motorService) {
getMotors();
function getMotors() {
motorService.GetAllMotors()
.success(function (motors) {
$scope.motors = motors;
})
.error(function (error) {
$scope.status = 'Unable to load motor data: ' + error.message;
});
}
}]);
angular service
motorApp.factory('motorService', function ($http) {
var urlBase = 'http://localhost:40738/api';
var motorService = {};
motorService.GetAllMotors = function () {
return $http.get(urlBase + '/GetAllMotors');
};
return motorService;
});
Error i am getting on chrmoe browser console
Error: [$injector:unpr] Unknown provider: $motorServiceProvider <- $motorService <- motorController

You have a extra $ infront of MotorService, change
From:
.controller('motorController', ['$scope', '$motorService',function ($scope, motorService)
To:
.controller('motorController', ['$scope', 'motorService',function ($scope, motorService)

The problem with your code is that the factory is given a different module name "motorApp" instead of module name "module".
Use
module.factory('motorService', function ($http) { //change here
var urlBase = 'http://localhost:40738/api';
var motorService = {};
motorService.GetAllMotors = function () {
return $http.get(urlBase + '/GetAllMotors');
};
return motorService;
});
Also in your controller you should remove the "$" from injected service name "motorService"
var module = angular.module('myApp', [])
.controller('motorController', ['$scope', 'motorService',function ($scope, motorService) {
getMotors();
function getMotors() {
motorService.GetAllMotors()
.success(function (motors) {
$scope.motors = motors;
})
.error(function (error) {
$scope.status = 'Unable to load motor data: ' + error.message;
});
}
}]);

Push values to array AngularJS

Im trying to push a data value to an array in AngularJS, with .push();, but I always get this error message:
Error: $scope.test.push is not a function
Here is my HTML:
<div ng-controller="Test">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">
<div class="page-header"><h1>Testar</h1></div>
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Sträcka</th>
<th>Tid</th>
</tr>
</thead>
<tr ng-repeat="info in test"><td>{{info.stracka}}</td><td>{{info.tid}}</td></tr>
</table>
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<div class="form-group" ng-class="{'has-error' : userForm.stracka.$invalid && !userForm.stracka.$pristine, 'has-success' : userForm.stracka.$valid }">
<label>Sträcka(m):</label>
<input type="text" name="stracka" class="form-control" ng-model="form.stracka" required>
<p ng-show="userForm.stracka.$invalid && !userForm.stracka.$pristine" class="help-block">Fel sträcka</p>
</div>
<div class="form-group" ng-class="{'has-error' : userForm.tid.$invalid && !userForm.tid.$pristine, 'has-success' : userForm.tid.$valid && !userForm.tid.$pristine}">
<label>Tid:</label>
<input type="text" name="tid" class="form-control" ng-model="form.tid" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.tid.$error.minlength" class="help-block">För kort</p>
<p ng-show="userForm.tid.$error.maxlength" class="help-block">För långt</p>
</div>
<button type="submit" class="btn btn-primary">Lägg till</button>
</form>
</div>
</div>
</div>
And here is my controller:
as.controller('Test', function($scope, $http, $rootScope, testFactory)
{
$http.get($rootScope.appUrl + '/nao/test/test')
.success(function(data, status, headers, config) {
$scope.test = data.data;
});
$scope.form = {};
$scope.submitForm = function(isValid) {
if(isValid)
{
/*testFactory.testFactoryMethod(function($http) {
$scope.test = data;
});*/
$http.post($rootScope.appUrl + '/nao/test', $scope.form)
.success(function(data, status, headers, config) {
console.log(data);
$scope.test.push($scope.form);
}).error(function(data, status) {
});
}
};
});
Can anyone help me and explain why I get this message?

Try doing this:
$scope.test = [];
$scope.test.push($scope.form);

Try this:
as.controller('Test', function($scope, $http, $rootScope, testFactory)
{
$http.get($rootScope.appUrl + '/nao/test/test')
.success(function(data, status, headers, config) {
$scope.test = data.data;
});
$scope.form = {};
$scope.submitForm = function(isValid) {
if(isValid)
{
/*testFactory.testFactoryMethod(function($http) {
$scope.test = data;
});*/
$http.post($rootScope.appUrl + '/nao/test', $scope.form)
.success(function(data, status, headers, config) {
console.log(data);
$scope.test = $scope.test || [];
$scope.test.push($scope.form);
}).error(function(data, status) {
});
}
};
});

create an array first -
$scope.usermsg = [];
then push value in it -
$scope.usermsg.push($variable);