I have a page which makes an API call to retrieve data and display it. Everything appears to work fine when navigating from home to this page, but if I press F5 the data is lost and only the bindings are shown {{first_name}}
Here is my controller:
app.controller('examinersCtrl', function($scope, $http) {
$http.defaults.useXDomain = true;
$http({
method: 'GET',
url: 'https://shielded-reaches-93856.herokuapp.com/v1/examiners'
}).success(function(data, status, headers, config) {
$scope.examiners = data;
}).error(function(data, status, headers, config) {
console.log('There was an error getting the data');
});
});
});
It seems bizarre that the http request is being made only on the initial page load, and not when a refresh happens. Is there another way to do this?
Thanks!
Related
I am getting a valid JSON request but only $http fail method is invoked. It shows OK 200 in firebug. Also the view is not getting updated. Newbie trying out AngularJS so something could be too wrong :)
$http.jsonp("http://localhost:51377/api/Books/1").success(function(data, status, headers, config) {
alert("Suc");
$scope.people = data;
}).error(function(data, status, headers, config) {
$scope.people = data;
alert("fail");
});
This is the response in firebug:
{"ID":1,"BookName":"ASP.Net"}
Also fails for:
[{"ID":1,"BookName":"ASP.Net"}]
getting 404 in status code in $http call. I am using jsonp which should take care CORS? as I read from somewhere. My angular is in file:// protocol
Update-1:
Tried with launching my angular in localhost from VS. Same results
Update-2:
I added configuration changes to remove CORS in my backend .net webapi and now it works with the following code but still the original above code using jsonp fails
$http({
method: 'get',
url: 'http://localhost:51377/api/Books/',
responseType: "json"
}).success(function (data, status, headers, config) {
alert(data);
console.log('Success: ' + data);
$scope.people = data;
}).error(function (data, status, headers, config) {
console.log('Error: ' + data);
});
I believe you need to add a callback parameter to your request:
$http.jsonp("http://localhost:51377/api/Books/1?callback=JSON_CALLBACK")
More info here:
https://docs.angularjs.org/api/ng/service/%24http#jsonp
Also, see this JSFiddle (not mine):
http://jsfiddle.net/saarmstrong/hYACX/8/light/
When you remove the callback parameter it fails...
try to use only "/api/Books/1" instead of "http://localhost:51377/api/Books/1"
I am using an angular form which edits data. The data is fetched by $http and assigned to a controller object. I see that the form is set to modified due to this data assignment. I would like to have form state as not modified. This is being done on a button click, i would rather do it $http.success. this does not seem to be working though. Can you please advice?
Thanks
I had the same problem and I did the delayed initialization as shown at http://betsol.github.io/angular-input-modified/delayed-init/
Here is my code.
$http({
...
...
}).success(function(rdata, status, headers, config) {
$scope.user = angular.copy(rdata.data);
// Calling set-pristine after digest cycle.
if ($scope.myProfileForm) {
$timeout(function() {
$scope.myProfileForm.$setPristine();
});
}
}).error(function(data, status, headers, config) {
...
...
});
I am using AJAX to login to the server. For API calls the server uses session authentication. How do I set the browser session from a login response?
$http({ method: 'POST',
url: API_URL+'/signin',
data: $scope.loginData
}).
success(function(data, status, headers, config) {
//I want to set the browser session here
// In postman I see a cookie which contains sessionId
}).
error(function(data, status, headers, config) {
console.log(data);
});
It's a cross domain request as the server allows that
Use a library like this one to set a cookie and get it everytime you need like this
$.setCookie("sessionId",value);
$.getCookie("sessionId"); // returns value
I am new to angularjs. I am using it with ionic framework. I am trying to calling a json web service but it always returns 404.
When I try in browser it works perfectly fine.
here is my code:
function FetchCtrl($scope, $http) {
$scope.fetch = function() {
$http({method: 'GET', url: 'http://example.com/anyservice'}).
success(function(data, status, headers, config) {
alert("data "+data);
}).
error(function(data, status, headers, config) {
alert("error "+status);
});
};
}
Use either Chrome or FireFox Developer Tools and open the Network tab, then give it a shot and see what the actual request is that is happening, that should help you finding your problem.
I'm having some problems when I try to make some $http calls after the user session has expired. Server side the methods are created in such a way that if a request comes and the user isn't authenticated it redirects to the login page. Making the call with JS doesn't help much because for some method it returns me the HTML mark-up for the login page and for other calls it doesn't work at all. I would like to know why some calls return something and some calls don't do a thing.
CODE - Call that works
$http({
url: url + $scope.ftValue,
method: 'GET'
})
.success(function (data, status, headers, config) {
//stuff on success
})
.error(function (data, status, headers, config) {
console.log("An error occured when applying the Free Text Search!");
});
Call that doesn't work
$http({
url: url + '¤tFacet=' + facetName,
method: 'GET'
})
.success(function (data, status, headers, config) {
//stuff on success
})
.error(function (data, status, headers, config) {
console.log("Error during facet values extraction. Status: " + status);
});
To note that the only thing that's different is the method that's getting called. And that's kind of irrelevant because the controller has an authorisation annotation and the call doesn't even reach the method (which is fine, because for the one that works it returns me the login page).
I would like to know what would cause the second call to not work. Both are triggered by an ng-click directive.