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 mas, 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);
    };

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 mas, 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);
    };

• javascript
• jquery
• angularjs
• json
• post

Share Improve this question Follow edited Dec 21, 2017 at 11:12 Clint_A asked Dec 21, 2017 at 10:56 Clint_AClint_A 54622 gold badges1616 silver badges3737 bronze badges 15

• What are you posting? JSON object, string, anything else? – chrisv Commented Dec 21, 2017 at 10:58
• 1 You should show some code, otherwise we can only guess. – Federico klez Culloca Commented Dec 21, 2017 at 10:58
• you have an error in your backend (PHP?) check how you are processing your data – Aleksey Solovey Commented Dec 21, 2017 at 10:58
• @AlekseySolovey are you sure? What if he is posting JSON object and the server expects string? – chrisv Commented Dec 21, 2017 at 10:59
• According to the data I inspect, it posts JSON objects – Clint_A Commented Dec 21, 2017 at 11:00

 |  Show 10 more ments

3 Answers 3

Sorted by: Reset to default 0

I guess the error html is not generated by your code but host (like IIS). It could be a better practice to create your error response with json data. Anyway, you can handle ok and error response separately in angularJs.

$http.post returns a promise object, which can be used like

$http.post(url, data)
.then(function(response){
   //handle normal result data here 
})
.catch(function(response){
  //handle error case here 
})

Its not fully pleted question. You have to mention the data that you trying to parse and its response.

You are getting 500 error its seems you are getting error from server. it means your back-end code making error.

Also please check your parsing dataType.

I think you have to mention responseType to "json".

   this.AjaxPost2 = function (data, route, successFunction, errorFunction, extras) 
   {
    $http({
        method: 'POST',
        url: route,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: data,
       responseType: 'json',
    }).success(function (response, status, headers, config) {
        successFunction(response, status, extras);
    }).error(function (response) {
        errorFunction(response);
    });

}

You have to mention which data you are parsing.

A very late answer but I've e 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.