SyntaxError: Unexpected token R in JSON at position 0 at JSON.parse ()

Question

Unable to enter success() function instead getting an syntax error of 'Unexpected token R in JSON at position 0 at JSON.parse ()'. But all the background database operations are going as they should.

Note: I am not returning any JSON data from the AJAX call

<html ng-app="PlaylistApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="lib/angular.min.js"></script>
<script>
      var playlistApp = angular.module('PlaylistApp', []);
      playlistApp.controller('PlaylistCtrl', function ($scope, $http)
      {
            $http({
                    method : 'GET',
                    url : 'http://localhost:8080/SignageSoC/api/playlist/all'
                    }).then(function success(response) {
                    $scope.playlists = response.data;
                });
          $scope.removePlaylist = function(index, playlistId)
          {       
            var i = index;
            alert(i);
            alert(playlistId);
            $http({
                    method : 'DELETE',
                    url : 'http://localhost:8080/SignageSoC/api/playlist/'+ playlistId
                 }).then(function success() {
                    alert(i);
                    $scope.playlists.splice(i, 1);
                });
            }
    });
</script>
</head>
<body ng-controller="PlaylistCtrl">
    <div>
        <br>
        <br>
        <br>
        <table class="center">
            <tr>
                <th>PlaylistId</th>
                <th>Name</th>
                <th>Total_duration</th>
                <th>Play_continuous</th>
                <th>Start_time</th>
                <th>End_time</th>
                <th>Update</th>
                <th>Remove</th>
            </tr>
            <tr data-ng-repeat="(index,x) in playlists">
                <td>{{x.playlistId}}</td>
                <td>{{x.name}}</td>
                <td>{{x.total_duration}}</td>
                <td>{{x.play_continuous}}</td>
                <td>{{x.start_time}}</td>
                <td>{{x.end_time}}</td>
                <td><button data-ng-click="updatePlaylist(index)">Update</button></td>
                <td><button data-ng-click="removePlaylist(index, x.playlistId)">Delete</button></td>
            </tr>
        </table>
    </div>
</body>
</html>

"but I am not tring to parse anything in the code" — Please [read the documentation](https://docs.angularjs.org/api/ng/service/$http): **Default Transformations `… Response transformations … If JSON response is detected, deserialize it using a JSON parser.** — Quentin, Nov 29 '16 at 10:42
@Quentin, I took a glance at the docs but here I am just returning an string saying particular has been deleted. And I am not trying to do anything with that response, I just want to do an splice operation when it is a success. — Sarath Raja, Nov 29 '16 at 11:09
And Angular thinks you are responding with JSON and throwing an error because it isn't valid JSON. — Quentin, Nov 29 '16 at 11:14
@Quentin Is there any workaround to avoid that or is it mandatory to return an json object — Sarath Raja, Nov 29 '16 at 11:17
I'd assume the solution is "Send the correct content-type in the response" — Quentin, Nov 29 '16 at 11:18
@Quentin There is no content-type setting option here in angular [see this](https://docs.angularjs.org/api/ng/service/$http#usage) as in AJAX — Sarath Raja, Nov 29 '16 at 11:31
I said, "in the **response**". Not the request, the response. — Quentin, Nov 29 '16 at 11:33
Can u tell me how to make it to return a string. Since angular.js deals with promises I am unable to do what you said? — Sarath Raja, Nov 29 '16 at 11:41
I'm still assuming that the solution is "Send the correct content-type in the response" — Quentin, Nov 29 '16 at 11:42
… although you might be asking a duplicate of http://stackoverflow.com/questions/14220321/ now … but that's a different issue and you'd still be blocked by the "Angular thinks it is getting JSON but is not" problem. — Quentin, Nov 29 '16 at 11:42

Sarath Raja · Accepted Answer · 2017-03-06T12:29:57.023

It turns out there is way how we can avoid this exception. Any response from a angular ajax call expects a promise(which will be resolved into an object internally), and JSON.parse will be automatically invoked on that response object.

If we are not returning any JSON object(which in my case is true) then angular throws an Unexpected token (any alphabet) in JSON at position 0 at JSON.parse () exception.

To make ajax call receive any data other than an object, we have to use an inbuilt configuration known as transformResponse attribute and make the parser know that we are not using any JSON data.

To do that I used the following way

 $http({
        method : 'DELETE',
        url : 'http://localhost:8080/SignageSoC/api/playlist/'+ playlistId,
        transformResponse: function(response)
                           {
                                    //alert("Success() starts here");
                                    //alert(response);          
                                    return response;                    
                           }
     }).then(function success(modResponse) {
        alert(JSON.stringify(modResponse));
        alert(JSON.stringify(modResponse.data));
        //$scope.playlists.splice(index, 1);
    });

Now, if you print the modified response you can see the data property altered to whatever we are returning.

Then we can perform any opertion that we need on that data.

score 1 · Answer 2 · answered Sep 27 '21 at 07:52

this typically happens when your application expects a JSON response in return for an API call. So first make sure your API returns a JSON response at first. (in my case I was getting a string type return and formatting it into JSON worked for me.)

And there is another probably that the server-side functionality that is usually responsible for generating and returning the stringified JSON failed. There are a variety of causes for this, but you should begin by reviewing the server-side code and making sure it is correct.

SyntaxError: Unexpected token R in JSON at position 0 at JSON.parse ()

2 Answers2