I can't able to read the response from the server in angularjs code. in $http methode , but in chrome inspect network option , i can sea the request and response.
My code is
$http({
method: 'POST',
url: url,
data: data,
responseType: 'arraybuffer',
}).then(function successCallback(res) {
console.log('---res', res);
}, function errorCallback(res) {
console.log('---err', res);
});
$http({
method: 'POST',
url: url,
data: data,
responseType: 'arraybuffer',
transformResponse: appendTransform($http.defaults.transformResponse, function(value) {
return doTransform(value);
})
});
above code worked for me
I am trying to access this REST API, which accepts three parameters:
stationId, crusherId, monthYear
I am doing it like this in AngularJS as:
$http({
//headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
//headers: {'Content-Type': 'application/json; charset=UTF-8'},
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
'Accept': 'application/json'
},
url: 'https://myurl../api/getHPData',
method: 'POST',
data: {
stationId: 263,
crusherId: 27,
monthYear: '2016-4'
}
})
.then(function(data, status, headers, config) {
//console.log(JSON.stringify(response));
console.log(data);
})
.catch(function(error){
//console.log("Error: " + JSON.stringify(error));
console.log(error);
})
But I am always getting this:
Object {data: "{"result":"false"}", status: 200, config: Object, statusText: "OK", headers: function}
OR
{"data":"{\"result\":\"false\"}","status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"headers":{"Content-Type":"application/x-www-form-urlencoded;
charset=UTF-8","Accept":"application/json"},"url":"https://myurl../api/getHPData","data":{"stationId":263,"crusherId":27,"monthYear":"2016-4"}},"statusText":"OK"}
If I change header Content-Type to:
headers: {'Content-Type': 'application/json; charset=UTF-8'},
It gives:
Object {data: null, status: -1, config: Object, statusText: "",headers: function}
OR
{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"headers":{"Content-Type":"application/json;
charset=UTF-8","Accept":"application/json, text/plain,
/"},"url":"https://myurl../api/getHPData","data":{"stationId":263,"crusherId":27,"monthYear":"2016-4"}},"statusText":""}
What I am doing wrong, Please help me.
Plunker is here:
https://plnkr.co/edit/57SiCdBZB2OkhdR03VOs?p=preview
(Edit)
Note:
I can do it in jQuery as:
<script>
$(document).ready(function() {
get_homepage_data(263, 27, '2016-04');
function get_homepage_data(stationIds, crusherIds, date) {
var url = "https://myurl../api/getHPData";
var data_to_send = {
'stationId': stationIds,
'crusherId': crusherIds,
'monthYear': date
};
console.log("Value is: " + JSON.stringify(data_to_send));
//change sender name with account holder name
// console.log(data_to_send)
$.ajax({
url: url,
method: 'post',
dataType: 'json',
//contentType: 'application/json',
data: data_to_send,
processData: true,
// crossDomain: true,
beforeSend: function () {
}
, complete: function () {}
, success: function (result1) {
var Result = JSON.parse(result1);
var value_data = Result["valueResult"];
var foo = value_data["gyydt"];
console.log("Log of foo is: " + foo);
var foo2 = 0;
// 10 lac is one million.
foo2 = foo / 1000000 + ' million';
console.log(JSON.stringify(value_data["gyydt"]) + " in million is: " + foo2);
}
, error: function (request, error) {
return false;
}
});
}
}); // eof Document. Ready
</script>
Output of above script is script is:
Value is: {"stationId":263,"crusherId":27,"monthYear":"2016-04"}
XHR finished loading: POST
"https://myurl../api/getHPData".
Log of foo is: 26862094
"26862094" in million is: 26.862094 million
Which is perfect. :)
When posting form data that is URL encoded, transform the request with the $httpParamSerializer service:
$http({
headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
url: 'https://fnrc.gov.ae/roayaservices/api/getHPData',
method: 'POST',
transformRequest: $httpParamSerializer,
transformResponse: function (x) {
return angular.fromJson(angular.fromJson(x));
},
data: {
"stationId": 263,
"crusherId": 27,
"monthYear": '2016-04'
}
})
.then(function(response) {
console.log(response);
$scope.res = response.data;
console.log($scope.res);
});
Normally the $http service automatically parses the results from a JSON encoded object but this API is returning a string that has been doubly serialized from an object. The transformResponse function fixes that problem.
The DEMO on PLNKR
The documentation says that the stationId and crusherId parameters should be arrays of strings. Also, it looks like you are sending JSON data, so make sure to set that header correctly.
$http({
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
url: 'https://fnrc.gov.ae/roayaservices/api/getHPData',
method: 'POST',
data: {
stationId: ['263'],
crusherId: ['27'],
monthYear: '2016-4'
}
})
When I change the code in your plunkr to use the corrected code above, I get the following response: "The requested resource does not support http method 'OPTIONS'."
As the other (now deleted) answer correctly mentioned, this means that there is a CORS issue. The browser is trying to send a "preflight" request before making the cross-origin request, and the server doesn't know what to do with it. You can also see this message in the Chrome console:
XMLHttpRequest cannot load
https://fnrc.gov.ae/roayaservices/api/getHPData. Response for
preflight has invalid HTTP status code 405
I have the following Angular 1.5 $http request:
this.$http({
method: 'POST',
url: "example.com",
data: {
"action" : "myAction"
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {...}
});
And I'm trying to rewrite it to Angular2, but I don't know how the "data" and "transformRequest" properties translate. So far I have:
let options = new RequestOptions({
method: RequestMethod.Post,
headers: myHeader
});
this.http.post(
'example.com',
options
);
How can I add the Angular2 equivalent of "data" and "transformRequest"?
I have this very strange problem. I have a very long string as a token for an app. When i`m doing the http post request, the string changes.
From the ending of "Vow== 256220" it is changing to "Vow: = 256220" and i do not understand why.
Here is the code if helps:
var request = $http({
method: "post",
url: urlWS,
data: {token: token},0
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
request.success(function (data) {
alert(data);
});
Following code working for me.
$http({
method: "post",
url: urlWS,
data: 'token='+encodeURIComponent("Vow== 256220"),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
request.success(function (data) {
alert(data);
});
May be above solution solve your problem.
You will have to configure $httpProvider in your main module config function. This is been done with transformRequest method by firstly adding the default header you have added and then transforming the request.
Add the following code to you main config function module:
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// post headers
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$httpProvider.defaults.transformRequest = [function(data) {
return angular.isObject(data) && String(data) !== '[object File]' ? $.param(data) : data;
}];
I hope it helps ;)
My service:
This was mistake 1 of 2 cause of my error:
getAll: function(url) {
deferred.resolve($http({ <--- deferred.resolve should not have been here
method: 'GET',
url: url,
contentType: "application/json; charset=utf-8",
cache: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}));
return deferred.promise;
},
Should have been instead:
getAll: function (url) {
$http({
method: 'GET',
url: url,
contentType: "application/json; charset=utf-8",
cache: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
My controller:
This was mistake 2 of 2 cause of my error:
// $scope.PassengerVehicles = crudSvc.getAll('/_json/PassengerVehicles.js');
// should have been:
crudSvc.getAll('/_json/PassengerVehicles.js').then(function (data) {
$scope.PassengerVehicles = data;
});
My template:
<ul data-ng-repeat="passVeh in PassengerVehicles">
<li>{{passVeh.itemId}}</li>
</ul>
Here is my plunker, which has been corrected:
AngularJS not binding promise to template
Than You Fourth!!
You have the getAll() function immediatly resolving and returning a promise to the controller. You need to allow the getAll() function to execute and deal with the promise when that resolves:
getAll: function(url) {
return $http({
method: 'GET',
url: url,
contentType: "application/json; charset=utf-8",
cache: true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
},
and in the controller:
crudSvc.getAll('/_json/PassengerVehicles.js').success(function (vehicles){
$scope.PassengerVehicles = vehicles;
});
The difference is that you are returning a promise that immediately resolves and returns another promise. You only need to resolve the http promise.