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

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: Default Transformations `… Response transformations … If JSON response is detected, deserialize it using a JSON parser. — Quentin
– Quentin, Commented Nov 29, 2016 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
– Sarath Raja, Commented Nov 29, 2016 at 11:09
And Angular thinks you are responding with JSON and throwing an error because it isn't valid JSON. — Quentin
– Quentin, Commented Nov 29, 2016 at 11:14
@Quentin Is there any workaround to avoid that or is it mandatory to return an json object — Sarath Raja
– Sarath Raja, Commented Nov 29, 2016 at 11:17
I'd assume the solution is "Send the correct content-type in the response" — Quentin
– Quentin, Commented Nov 29, 2016 at 11:18

Sarath Raja · Accepted Answer · 2017-03-06 12:29:57Z

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.

chamod rathnayake · Accepted Answer · 2021-09-27 07:52:57Z

1

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.

answered Sep 27, 2021 at 7:52

chamod rathnayake

1,00111 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related