CODEWITHSUNDEEP
javascriptjsonangularjshttpresponse
Zvonimir Tokic
Zvonimir Tokic

Reputation: 461

AngularJS json.parse unexpected end of data at line 1 column 1 of the json data

html

    <!doctype html>
    <html lang="en" ng-app="phonecatApp">
    <head>
  <meta charset="utf-8">
  <title>WrikeAPI</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 <script src="https://code.angularjs.org/1.4.0-beta.5/angular.js" data-semver="1.4.0-beta.5" data-require="[email protected]"></script>
  <script data-require="[email protected]" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular-route.js"></script>

<script>

 var wrikeApiControllers = angular.module('wrikeApiControllers', []);

 var client_id = "";
 var client_secret = "";
 var grant_type = "";
 var refresh_token = "";

wrikeApiControllers.controller('AccessToken', ['$scope', '$http',
  function($scope, $http) {
   $http.post('https://www.wrike.com/oauth2/token?client_id='+client_id+'&client_secret='+client_secret+'&grant_type='+ grant_type +'&refresh_token='+refresh_token).
      success(function(data, status, headers, config) {

        $scope.response = data;
      }).
      error(function(data, status, headers, config) {

      });

  }]);  


var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'wrikeApiControllers'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/access', {
        templateUrl: 'display-access-token.html',
        controller: 'AccessToken'
      }).
      otherwise({
        redirectTo: '/access'
      });
  }]);


</script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

and this is my display-access-token.html

      <ul >
    <div ng-repeat="access in response"  class="thumbnail">
      <p>{{response.access_token}}</p>
      <p>{{response.token_type}}</p>
      <p>{{response.expires_in}}</p>
      <p>{{response.refresh_token}}</p>
    </div>
  </ul>

when I accessing wrike using my web browser or using Chrome extension postman I get response after posting like this

    {
    "access_token": "UQldFEZJwifB3PEJWAsvasv3js1uoLk1GCq5ppMGgUijoz8gP46tBxeBd5ud51VGLFNlGjQw-N-N",
    "token_type": "bearer",
    "expires_in": 3599,
    "refresh_token": "8yRHuuzeeEsqE4o0Y1lJe02uhqgGlalxnl798aksCzFn7WxjEtS4iveFhBjEG349w7pDFm3m1sY-A-N"
}

but when I am using AngularJS i can't get response POST is successful but I don't see response. I get this message in web browser "Json.parse unexpected end of data at line 1 column 1 of the json data"

Any help please ? Thanks

Upvotes: 0

Views: 5275

Answers (3)

St&#233;phane GRILLON
St&#233;phane GRILLON

Reputation: 11872

I had the same problem when I migrated from version V1.2 to V1.4 AngularJS. In my server (JAX-RS), I produced JSON type in annotation and I put on a String in response. I changed the Produces(MediaType.APPLICATION_JSON) by Produces( MediaType.TEXT_PLAIN). AngularJS wanted a JSON format but he received a String.

Upvotes: 0

Alessio
Alessio

Reputation: 2068

This piece of code is wrong

<div ng-repeat="access in response"  class="thumbnail">
  <p>{{response.access_token}}</p>
  <p>{{response.token_type}}</p>
  <p>{{response.expires_in}}</p>
  <p>{{response.refresh_token}}</p>
</div>

Because you're iterating over the array "response" and for each iteration you have an "access" object, so inside each 'p' element you have to use "access" not "response", like this:

<div ng-repeat="access in response"  class="thumbnail">
  <p>{{access.access_token}}</p>
  <p>{{access.token_type}}</p>
  <p>{{access.expires_in}}</p>
  <p>{{access.refresh_token}}</p>
</div>

Otherwise, if the expected data is not an array, you should not use ng-repeat but simply use the response object

Upvotes: 2

aitorllj93
aitorllj93

Reputation: 465

I don't know if it helps, but have you tried enabling cors?

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = false;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";

Upvotes: 0

Related Questions