0

I have an API website I made and I want my javascript to read in the values. I have a page http://ec2-54-152-248-65.compute-1.amazonaws.com/temp/ that has this on it:

{'records': [{'a': 'a'}]}

and I want my javascript to read it in and convert it to a JSON. I have this code so far and it isn't working:

$http({
    method: 'JSONP',
    url: "http://ec2-54-152-248-65.compute-1.amazonaws.com/temp/"
}).success(function(response) {$scope.names =      JSON.parse(JSONize(response.records));});

 });

Does anyone have any theories on how I could convert this to a JSON and have it read into my web app as something I can ng-repeat.

This is the error in my console.log:

(index):1 Uncaught SyntaxError: Unexpected token :
MostafaR
  • 3,547
  • 1
  • 17
  • 24
Rob
  • 3,333
  • 5
  • 28
  • 71

3 Answers3

1

Your response looks like a wrong JSON response, used single quote instead of double quote, so a quick solution can be:

$scope.names = JSON.parse(response.replace(/'/g, '"'));

Or fixing your server-side code to generate correct JSON response.

MostafaR
  • 3,547
  • 1
  • 17
  • 24
  • I corrected it to have double quotes, but it still gives the same error Uncaught SyntaxError: Unexpected token : – Rob Nov 08 '15 at 04:55
  • 1
    @Rob I don't know what is the `JSONize` function you're using, but I think you don't need that, just do `JSON.parse(response)`. – MostafaR Nov 08 '15 at 04:57
  • I still keep getting that same error, I fixed the JSON and used your code but it won't read in. – Rob Nov 08 '15 at 04:58
  • app.controller('customersCtrl', function($scope, $http) { $http({ method: 'JSONP', url: "http://ec2-54-152-248-65.compute-1.amazonaws.com/temp/" }).success(function(response) {$scope.names = JSON.parse(response);}); }) ; – Rob Nov 08 '15 at 04:59
  • 1
    OK, I see an unexpected `;` after the `url: "..."`! Remove that please. – MostafaR Nov 08 '15 at 05:01
  • no more error but it still doesn't show up in the console – Rob Nov 08 '15 at 05:05
  • 1
    I don't see any code supposed to show something in console, show us how changing `$scope.names` will effect the console, then we can help you more. You can add a line `console.log($scope.names)` after the line `$scope.names = ...` to see the result of `JSON.parse` – MostafaR Nov 08 '15 at 05:08
  • It works for this site: http://www.w3schools.com/angular/customers.php, I'm not sure why it isn't for mine, I'll try to get something more concrete so you can help. – Rob Nov 08 '15 at 05:10
  • app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) { $scope.names =response; console.log($scope.names); }); }); This code works perfectly, so I'm not sure why the other link won't work for me. – Rob Nov 08 '15 at 05:10
  • 1
    @Rob Dear friends, you need to know exactly what you want to do with the response, I see you're not parsing response at all. So if you want me to be able to help you explain what are you doing there! And thank me with a +1 if you think it helped you ;) – MostafaR Nov 08 '15 at 05:12
  • I just want to be able to read in a JSON from an external website. I really don't care how I get it there as long as it can read the JSON. I've tried a bunch of techniques and been stuck for hours on this. – Rob Nov 08 '15 at 05:13
  • OK, but I see you're not using JSON.parse at the end. – MostafaR Nov 08 '15 at 05:15
0

By looking at your code

$http({
    method: 'JSONP',
    url: "http://ec2-54-152-248-65.compute-1.amazonaws.com/temp/"
    }).success(function(response) {
       $scope.names =  JSON.parse(JSONize(response.records));
    });
});

you should 

$scope.names =  JSON.parse(JSONize(response)).records;

and if you don't want to change your server side code, do what @MostafaR recommended or use eval function. (for the problem caused because of used single quote instead of double quote)

$scope.names =  eval( '(' + response + ')' ).records;
Prabhu
  • 967
  • 7
  • 14
0

You are mixing JSON and JSONP. You have a JSON object, but you're calling it with JSONP.

To avoid the CROS origin policy, you may need to use JSONP. To call your object with JSONP, you need to ensure the object is 'callable' via JSONP, and that means you need it to have the format:

 mycallback({ foo: 'bar' });

See here for a good explanation: What is JSONP all about

That is what CROS policy is all about: ensuring you access the data from another origin (domain) because you have the right to do so, because you somehow know what function the object is encapsulated in.

Community
  • 1
  • 1
Giuseppe
  • 464
  • 13
  • 24