Why variable is not decremented? - angularjs

In Angular JS controller there is variable:
$scope.currentCount = {
'subscribers' : 0
}
Also in HTML template:
<span>{{currentCount.subscribers}}</span>
When I call method in this controller, this variable is not decremented in template, why?
$scope.saveSubscriber = function (type, name) {
$scope.saveSubObj.type = type;
$http({
url: "/subscribe",
method: "POST",
data: $.param($scope.saveSubObj),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status, headers, config) {
$scope.currentCount.subscribers--;
}).error(function(data, status, headers, config) {
//TODO
});
}
Look at success AJAX response:
$scope.currentCount.subscribers--;

Are you sure it fired the success method? I just checked and got the correct result in my local testing.
Could you please put $scope.currentCount.subscribers--; inside the $http error() method as well? Let's check then whether it decreases or not.

Related

Post Json data from Angularjs to MVC controller

When I pass JSON data from AngularJS to MVC. I am getting below error.
Http request configuration url must be a string or a $sce trusted object. Received: {"method":"POST","url":"Home/SavePDDetails","datatype":"json","data":{"PD":{"Name":"qqq","Address":"www"}}}
MVC code:
[HttpPost]
public JsonResult SavePDDetails(PDDetailsDTO PD)
{
new PDDetailsDAL().SavePDDetails(PD);
return Json(new { Success = true, Message = "Success" });
}
AngularJS code
$scope.Click = function() {
console.log('clicked');
$http.post({
method: 'POST',
url: 'Home/SavePDDetails',
datatype: "json",
data: {
PD: $scope.PD
}
}).success(function(response) {
console.log('success');
console.log(response);
}).error(function(response) {
console.log('error');
console.log(response);
});
}
If data and url are passed as a properties of the config object, don't use the $http.post method. Simply use $http:
̶$̶h̶t̶t̶p̶.̶p̶o̶s̶t̶(̶{̶
$http({
method: 'POST',
url: 'Home/SavePDDetails',
̶d̶a̶t̶a̶t̶y̶p̶e̶:̶ ̶"̶j̶s̶o̶n̶"̶,̶
data: {
PD: $scope.PD
}
})
There is no need to stringify the data as the $http Service does that automatically.
Try as follow in your function.
Use JSON.stringify() to wrap your json
var parameter = JSON.stringify({PD: $scope.PD});
$http.post('Home/SavePDDetails', parameter).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
console.log(data);
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

Angular $http is not sending data

I know it has been solved here many times, but I'm still not able to get it working.
My js call is:
var data = { value: 7 };
$http.post('api/controller/method', data);
But in fiddler there is no Content-Type and no JSON data.
I want the Content-Type to be 'application/json' which should be default, right?
Thanks
var data = { value: 7 };
$http({
url: "api/controller/method",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param(data)
}).success(function(data, status, headers, config) {
//some code when success post
}).error(function(data, status, headers, config) {
//some code when error post
});
Try this:
var response = $http.post('api/controller/method', data);
response.success(function(data, status1, headers, config) {
//
}

store response header value during angular http post

I am making an angular http post to an API which like this
$http({
method: 'POST',
url: 'http://api/ClientEndpoint',
data: register,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
transformRequest: function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
}).error(function (data, status, headers, config) {
alert(data);
});
which is returning the following response
But I am not able to store the response path in a variable. How can I do that?
It is cross domain scenario and this is the response being showed in chrome console
I want to access store the ClientEndpoint value
Did you forget the .success(function (data) { }) callback ? just like the .error() you put after the http() function
i hope this will solve your problem ;)
Use the headers variable in either your .succes(response, headers) or .error(response, headers).
E.g :
.success(function(data, status, headers, config) {
//Success Handling
});
.error(function(data, status, headers, config) {
//Error Handeling
});
This only works if you are on the same domain as the server, if it's cross domain, the server has to send the Access-Control-Expose-Headers for you to make this work.

AngularJS a service is not a function

This current code when ran returns TypeError: Services.updateUserData.set is not a function
Controller
Services.updateUserData.set($rootScope.user);
Services.js
this.updateUserData = function() {
return {
set: function(data) {
console.log(data);
$http({
method: 'POST',
url: 'api/data/',
data: {'data': data},
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
console.log(data);
});
}
}
}
The code below works but I would much rather have a get and set function within updateUserData so that I am not duplicating work.
Current Code
Controller
Services.updateUserData($rootScope.user);
Services.js
this.updateUserData = function() {
console.log(data);
$http({
method: 'POST',
url: 'api/data/',
data: {'data': data},
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
}).success(function(data, status, headers, config) {
console.log(data);
}).error(function(data, status, headers, config) {
console.log(data);
});
}
updateUserData is a function and hence there is no property called set. The option is either convert it to object
this.updateUserData={set:function(){}}
or invoke it
Services.updateUserData().set($rootScope.user);
before accessing set

How can I stop Angular $http from deserializing the response body?

This:
$http({method: 'GET', url: '/some/url/returning/json').
success(function(data, status, headers, config) {
console.log(data);
});
shows that Angular is giving me a JavaScript object as the first argument to my success handler. Presumably, it is trying to be smart by sniffing the content-type of the response.
This is undesired behavior. How do I tell Angular to give me the response body as a string?
The undesired behavior is caused by Angular's transformResponse. To turn this off, do:
$http({method: 'GET', url: '/some/url/returning/json', transformResponse: [] }).
success(function(data, status, headers, config) {
console.log(data);
});
It mentions in the docs that the responseType config option can be used, presumably as:
$http({method: 'GET', url: '/some/url/returning/json', responseType: 'text'})...

Resources