I have an AngularJS 1.5 app with a form that posts data to a db. In the form there is a drop down select. The problem is, some options in the drop down POST successfully while others encounter a POST error saying
POST http://localhost/myURL 500 (Internal Server Error)
and beneath it…
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at Object.qc [as fromJson] (angular.js:1285)
at apiError (postFormCtrl.js:957)
at AjaxServices.js:37
at angular.js:11029
at angular.js:15616
at m.$eval (angular.js:16884)
at m.$digest (angular.js:16700)
at m.$apply (angular.js:16992)
at g (angular.js:11313)
What could be causing some items from the same form to POST successfully and others to encounter this error? I’ve double checked the code for missing commas, brackets etc… there’s none.
I’ve inspected the output on browsers, the response headers for successful posts have
Content-Type:application/json in the response headers while failed POSTs have
Content-Type:text/html in the response headers. Could this be the issue?
And if it is, how do I prevent it because I don’t have a single setting in the application that sets the content-type as text/html.
Additionally, I know the problem cannot be in the ajax post function because the entire application utilizes the same ajax post function and they work well.
MORE INFO
This is an example of an item in the drop down select:
<div class="row" ng-if="isStudentActivity">
<div class="col-sm-10">
<label for="activity">Select an activity:</label>
<div>
<ui-select ng-model="theactivity.selected" theme="select2" class="form-control" name="activity" required>
<ui-select-match placeholder="Select or search an activity...">
<span>{{$select.selected.activity}}</span>
</ui-select-match>
<ui-select-choices repeat="item in activities | filter: $select.search">
<span ng-bind-html="item.activity | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
<p ng-show="dataFilterForm.activity.$invalid && (!dataFilterForm.activity.$pristine || dataFilterForm.$submitted)" class="help-block"><i class="fa fa-exclamation-triangle"></i> You must choose an activity.</p>
</div>
</div>
</div>
And this is the ajax function used by all the POSTs in the application
this.AjaxPost2 = function (data, route, successFunction, errorFunction, extras)
{
$http({
method: 'POST',
url: route,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).success(function (response, status, headers, config) {
successFunction(response, status, extras);
}).error(function (response) {
errorFunction(response);
});
}
And the function is called using
this.addCommunication = function (request, successFunction, errorFunction, params) {
ajaxService.AjaxPost2(request, path + "/addCommunication", successFunction, errorFunction, params);
};
Answer
A very late answer but I’ve come to learn that such errors are almost always due to to an error in the api itself. Syntax errors mostly. The front end is expecting a json to be returned but the api experienced hitches so it never ran or returned something else.
A quick way to solve this is to run the api in a REST client like postman or insomnia, see what’s returned and make the necessary fixes.