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

Question

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="angular.js@1.4.0-beta.5"></script>
  <script data-require="angular-route@1.4.0-beta.5" 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

score 2 · Accepted Answer · answered Mar 10 '15 at 14:56

2

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

answered Mar 10 '15 at 14:56

Alessio

2,018
25
26

Sorry I copy-paste that from wrong page i was using

{{access.access_token}}

{{access.token_type}}

{{access.expires_in}}

{{access.refresh_token}}

– Zvonimir Tokic Mar 10 '15 at 15:01
Did you try to console.log(data)? Are you sure that data is an array? – Alessio Mar 10 '15 at 15:04
I got this message in console Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.wrike.com/oauth2/token?client_id=....... This can be fixed by moving the resource to the same domain or enabling CORS. – Zvonimir Tokic Mar 10 '15 at 15:07
so this is the real problem so far, you should do the call to wrike.com from server, so Angular needs to call the server using http.post, the server will do that call and send back to the angular call the json – Alessio Mar 10 '15 at 15:28
How can I configure that ? Can you explain me with more details – Zvonimir Tokic Mar 10 '15 at 15:30
Are you developing also a server-side app? You have to do the post to your server, then form the server call the remote server (wrike.com) and getting the result (i.e. with php you can use curl, but you can do that in any language of course), then you can parse the response and return to the ajax call – Alessio Mar 10 '15 at 15:40
no i am currently trying local from my web browser fetch data remotely from wrike api server, but I don't understand if this link works in web browser why it doesn't work when i post data using angular – Zvonimir Tokic Mar 10 '15 at 15:50
you should read something about CORS and why it's important first – Alessio Mar 10 '15 at 15:53
Thank you, but do you know how to include CORS in AngularJS here on this example ? – Zvonimir Tokic Mar 10 '15 at 15:57

score 0 · Answer 2 · answered Mar 10 '15 at 14:56

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";

score 0 · Answer 3 · answered Oct 01 '15 at 10:48

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.

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

3 Answers3