This is Script.js
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
$http.get(
url: 'EmployeeService.asmx/GetAllEmployees'
)
.then(function (response) {
$scope.employees = response.data;
});
});
This is Htmlpage1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table border="1" style="border:none;">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
The expression Id Name Gender Salary
{{employee.id}} {{employee.name}} {{employee.gender}} {{employee.salary}} is not getting evaluated
The values of the table are not displaying
$http.get() method gets the url parameter as a string, so you are not using it correctly. This is the correct syntax:
$http.get('EmployeeService.asmx/GetAllEmployees')
Read more: $http#get
IF the url is correct then your code should work with this change
What event or who is making that request?
var app = angular
.module("myModule", [])
.controller("myController", function ($scope, $http) {
//when the page is ready
angular.element(document).ready(function() {
$http({ method: 'GET',
url: 'EmployeeService.asmx/GetAllEmployees'
}).then(function (response) {
$scope.employees = response.data;
}).catch(function (err) {
console.log('Error encountered : ' + err);
});
});
});
Related
I am creating a web api with angular. I get a problem in my HTML code. If I just invoke the web api, I get the needed data, but when I try to print it out in my HTML, I do not get the result. Please check my codes below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular CRUD</title>
<link href="Content/bootstrap.css" rel="stylesheet"/>
<script src="Scripts/angular.js"></script>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script>
var app = angular.module('myApp', [])
app.controller("EmployeeCtrl", function ($scope, $http) {
getEmployees();
var getEmployees = function () {
alert("SDFS");
$http.get('/api/Employee')
.then(function (response) {
$scope.Employee = response.data
},
function () {
alert("Error in retrieving data");
})
}
})
</script>
</head>
<body ng-app="myApp" ng-contoller="EmployeeCtrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Employee ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Employee Code</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Employee">
<td>{{item.EmployeeId}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EmployeeCode}}</td>
<td>{{item.Position}}</td>
<td>{{item.Office}}</td>
</tr>
</tbody>
</table>
</body>
</html>
You will notice that I even created an alert to check if the function is invoked but apparently it is not invoked. Can you please help. Thank you.
You have two issues with your code:
You have misspelled ng-controller.
You can not use the function before definition when creating function as a variable i.e. var funcName = function () { ... }. Change that to function getEmployees () { ... }
Solve these and it would work!
js code execute line by line you invoke your function before declare it
try this code instead of your controller:
<script>
var app = angular.module('myApp', [])
app.controller("EmployeeCtrl", function ($scope, $http) {
getEmployees();
var getEmployees=function() {
alert("SDFS");
$http.get('/api/Employee')
.then(function(response) {
$scope.Employee = response.data
},
function() {
alert("Error in retrieving data");
})
}
})
</script>
I need to display data from JSON response using Angularjs
When checking the response with DevTools i can see the results, but when it comes to diplay, it doesn't work
Controller :
MovieApp.controller('movieAdminCtrl', ['$http', '$scope', function($http, $scope){
$scope.movies=[];
$http.get('http://localhost:3000/movies').success(function(data) {
$scope.movies = data;
});
}]);
Response :
Display Code :
<tbody ng-repeat="movie in movies" >
<td></td>
<td >{{movie.title}}</td>
<td >{{movie.actors}}</td>
<td >{{movie.Created_date}}</td>
<td><img ng-src="{{movie.poster}}" /></td>
You need to access the data property of the response
$http.get('http://localhost:3000/movies').success(function(data) {
$scope.movies = data.data;
});
Please try this code..
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="app" ng-controller="movieAdminCtrl">
<table>
<tr ng-repeat="movie in movies">
<td></td>
<td>{{movie.title}}</td>
<td>{{movie.actors}}</td>
<td>{{movie.Created_date}}</td>
<td>
<img ng-src="{{movie.poster}}" />
</td>
</tr>
</table>
<script src="../lib/angular.js"></script>
<script>
var MovieApp = angular.module('app', []);
MovieApp.controller('movieAdminCtrl', ['$http', '$scope', function ($http, $scope) {
$scope.movies = [];
$http.get('http://localhost:3000/movies').success(function (data) {
$scope.movies = data;
});
}]);
</script>
</body>
</html>
I have problem with this code I have json data from my asp.net web api. I could not get this data by angularjs. as you can see the the code;
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title ng-bind="helloAngular"></title>
<script src="~/Scripts/angular.min.js"></script>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('myController', function ($scope, $htpp){
$htpp.get({
method:'GET',
url:'http://localhost:50972/api/product'})
.success(function (response) {
$scope.result = response.statusText
});
});
</script>
</head>
<body ng-controller="myController">
<table border="1">
<tr ng-repeat="product in response">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.type}}</td>
</tr>
</table>
</body>
</html>
You have some typo errors: instead of $htpp use $http
myapp.controller('myController', function ($scope, $http){
$http.get({
method:'GET',
url:'http://localhost:50972/api/product'})
.success(function (response) {
$scope.result = response.data;
});
});
How do I fetch table from db with promise. I have created a service and http call with promise. I have checked the console and the url is not getting called. I am not sure this is the eight way of creating service return a http promise
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="<%=request.getContextPath()%>/js/module.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style2.css" />
<script>
app.controller('tableController', function ($log, $scope, tableService)
{
$scope.customerTable = [];
var promise = tableService.fetchTable();
promise.then(function (data)
{
console.log("Your name is: " + data);
$scope.customerTable = data;
});
});
app.factory('tableService', function ($http)
{
return
{
fetchTable: function()
{
return $http.get('<%=request.getContextPath()%>/GetTable.do');
}
}
});
</script>
</head>
<body>
<div class="container" id="main"><br/><br/>
Search: <input type="text" ng-model="search" placeholder="Search">
<div ng-controller="tableController">
<table class="table table-striped table-hover table-bordered">
<tr>
<th style="font-size: 13.3px">Card number</th>
<th style="font-size: 13.3px">First name</th>
<th style="font-size: 13.3px">Opening balance</th>
<th style="font-size: 13.3px">Withdrawal</th>
<th style="font-size: 13.3px">Deposit</th>
<th style="font-size: 13.3px">Closing balance</th>
<th style="font-size: 13.3px">Tx date</th>
<th style="font-size: 13.3px">Usage type</th>
</tr>
<tr ng-repeat="data in filteredTodos| filter: search">
<td>{{data.CARD_NUMBER}}</td>
<td>{{data.FIRST_NAME}}</td>
<td>{{data.OPENING_BALANCE}}</td>
<td>{{data.WITHDRAWAL}}</td>
<td>{{data.DEPOSIT}}</td>
<td>{{data.CLOSING_BAL}}</td>
<td>{{data.TXDATE}}</td>
<td>{{data.USAGE_TYPE}}</td>
</tr>
</table>
<pagination
ng-model="currentPage"
total-items="customerTable.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<br/><br/><br>
<button class="form-control btn btn-success" type="submit" ng-click="fetchTable()">Load Table Data</button>
</div>
</div>
</body>
</html>
Your service makes the promise but does not deliver, try adding the $q service into yours like this:
app.factory('tableService', function ($http, $q) {
return {
fetchTable: function() {
// the $http API is based on the deferred/promise APIs exposed by the $q service
// so it returns a promise for us by default
return $http.get('<%=request.getContextPath()%>/GetTable.do')
.then(function(response) {
if (typeof response.data === 'object') {
return response.data;
} else {
// invalid response
return $q.reject(response.data);
}
}, function(response) {
// something went wrong
return $q.reject(response.data);
});
}
};
});
app.controller('tableController', function ($log, $scope, tableService)
{
$scope.customerTable = [];
$scope.getData = function() {
var promise = tableService.fetchTable();
promise.then(function (data)
{
console.log("Your name is: " + data);
$scope.customerTable = data;
});
}
});
<div ng-controller="tableController" ng-init="getData()">
app.controller('tableController', function ($log, $scope, tableService)
{
$scope.customerTable = [];
var promise = tableService.fetchTable();
promise.then(function (data)
{
console.log("Your name is: " + data);
$scope.customerTable = data;
});
});
This should do it. You were returning the data before setting the $scope.customerTable. As a matter of fact, why are you even returning data? You can't return something from a callback like that. I've removed that line also.
step1: Initially while page load $scope.results is empty arrayList
step2: When I click on search button I am unbale to load the data in table
1) test.js
While page loading results is empty
myApp.controller('HomeController', ['$scope', '$http','$location', '$rootScope', 'DataService','SearchService',
function($scope, $http, $rootScope, $location, DataService,SearchService) {
$scope.results = [];
$scope.searchSubmit = function(){
$scope.dashboardflag = true;
$("#dashboard").hide();
SearchService.getSearchResults.query({searchText:$scope.searchText,
startDate:$("#startDate").val(),endDate:$("#endDate").val(),
userId:$scope.userEntity.userid,managerId:101083,
status:'Answered',threadType:'REPLY',
pageNumber:0
},function(data) {
//var data1 = data.list;
$scope.$apply(function() {
$scope.results = angular.copy(data);
});
});
$("#searchResults").show();
};
}]);
2) test.html
Search
<table id="searchObjResults" border="1">
<tr>
<th>Assignto</th>
<th>Title</th>
<th>Id</th>
<th>Status</th>
<th>Workflow</th>
<th>Assignment date</th>
</tr>
<tr ng-repeat="obj in results">
<td>{{obj.userName}}</td>
<td>{{obj.threadTitle}}</td>
<td>{{obj.threadId}}</td>
<td>{{obj.threadStatus}}</td>
<td>{{obj.threadType}}</td>
<td>{{obj.assignedDate}}</td>
</tr>
</table>
Couple of things,
first if you already posted you html, please post the full html,
where is the ng-app, and your controller?
second, if you want to show\hide elemets maybe you should concider using ng-hide and add a some var to the scope that wlil control that
https://docs.angularjs.org/api/ng/directive/ngHide
also, is the "data" returning from the sevice is an array?
please console.log the result, for more info
Here is the example. It may help you to follow. If no data found, then table will not be shown to the user.
Refer: http://plnkr.co/edit/blSWT4eowYv17UwwhcnQ?p=preview
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainCtrl" ng-init="init()">
<table id="searchObjResults" border="1" ng-show="results.length">
<tr>
<th>Assignto</th>
<th>Title</th>
</tr>
<tr ng-repeat="obj in results">
<td>{{obj.userName}}</td>
<td>{{obj.threadTitle}}</td>
</tr>
</table>
</div>
</body>
</html>
js
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.results = [];
$scope.data = [{
userName: 'username1',
threadTitle: 'threadTitle1'
}, {
userName: 'username2',
threadTitle: 'threadTitle2'
}];
$scope.init = function() {
$scope.results = angular.copy($scope.data);
}
});