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;
});
});
Related
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);
});
});
});
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 am new to ANgularJS, Here is the code, I want to refresh the table every time the data is updated in database, but this code isn't working in angularjs. How to refresh the table with $interval or any other way in AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $timeout) {
$http.get("http://localhost/students.php")
.then(function (response) {$scope.names = response.data.records;});
$timeout(callAtTimeout, 2000);
});
</script>
</body>
</html>
Try this in you controller
app.controller('customersCtrl', function($scope, $http, $timeout) {
function getData(){
$http.get("http://localhost/students.php")
.then(function (response) {
$scope.names = response.data.records;
setTimeout(function() {
getData();
}, 2000)
});
};
getData();
});
Updated as per comment
See this example it is working fine with 5 second interval, compare your code with it
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script type="text/javascript">
angular.module("app",[])
.controller("ctrl",function($scope){
function getData(){
var time = new Date();
console.log('print at '+ time);
setTimeout(function() {
getData();
}, 5000)
};
getData();
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
</body>
</html>
This could solve the problem, but i would not recommend wasting resources.
$timeout(function(){
$http.get("http://localhost/students.php")
.then(function (response) {$scope.names = response.data.records;});
}, 2000);
It should be like this
$http.get("http://localhost/students.php")
.then(function (response) {
$scope.$evalAsync(function () {
$scope.names = response.data.records;
});
});
});
How can I get json data via ajax with angular? I tried a lot but my code is not working.
My code:
<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script>
angular.module('test', [])
.controller('TestCtrl', function($scope, $http) {
$scope.data = [];
$http.get("http://jsonplaceholder.typicode.com/users").then(function(res) {
$scope.data = JSON.parse(res);
});
});
</script>
</head>
<body ng-controller="TestCtrl">
<div ng-repeat="item in data">
{{item.id}}
</div>
</body>
</html>
Did you try like this..
<script>
var app = angular.module('test', [])
app.controller('TestCtrl', function ($scope, $http) {
$http.get("http://jsonplaceholder.typicode.com/users").then(function(res,status,xhr) {
$scope.data = res.data;
});
});
</script>
I am getting Cannot find module with name myapp,
actually the module creation and mapping of module with script code is correct then why I am facing this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AJAX with Servlets using AngularJS</title>
<script type="text/javascript" src=js/angular.min.js></script>
<script>
angular.module("myapp", []).controller('mycontroller', function ($scope, $http){
$scope.getDataFrmServer()=function(){
$http({
method:'GET';
url:'NGServlet';
}).success( function(data, status, header, config){
$scope.person=data;
}).error(function(data, status, header, config){
});
};
});
</script>
</head>
<body>
<div data-ng-app="myapp">
<div data-ng-controller="mycontroller">
<button data-ng-click="getDataFrmServer()">Fetch Data From Server</button>
<p>First Name: {{person.firstName}}</p>
<p>Second Name:{{person.secondName}}</p>
</div>
</div>
</body>
</html>
This is the working version. don't use ; in the object for your http call. Also your function definition was wrong.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AJAX with Servlets using AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
angular.module("myapp", []).controller('mycontroller', function ($scope, $http){
$scope.getDataFrmServer = function(){
$http({
method:'GET',
url:'NGServlet'
}).success( function(data, status, header, config){
$scope.person=data;
}).error(function(data, status, header, config){
});
};
});
</script>
</head>
<body>
<div data-ng-app="myapp">
<div data-ng-controller="mycontroller">
<button data-ng-click="getDataFrmServer()">Fetch Data From Server</button>
<p>First Name: {{person.firstName}}</p>
<p>Second Name:{{person.secondName}}</p>
</div>
</div>
</body>
</html>
Your code is having issues:
Instead of ' , ' you have used ' ; ' in $http method and url .
Please use the updated code. Please do correct the function definition also.
<script>
angular.module("myapp", []).controller('mycontroller', function ($scope, $http){
$scope.getDataFrmServer = function(){
$http({
method:'GET',
url:'NGServlet'
}).success( function(data, status, header, config){
$scope.person=data;
}).error(function(data, status, header, config){
});
}
});
</script>
<body>
<div ng-app="myapp">
<div data-ng-controller="mycontroller">
<button data-ng-click="getDataFrmServer()">Fetch Data From Server</button>
<p>First Name: {{person.firstName}}</p>
<p>Second Name:{{person.secondName}}</p>
</div>
</div>
</body>