Angular.js reading External JSON Address

Question

Hey guys I am trying to use an EPA API that provides daily UV Index information in JSON.

The link I am trying to read at the moment is:

http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVHOURLY/ZIP/33126/JSON?callback=callBackFn

If you open that link it shows valid JSON, but when I use it in my Angular.js code it does not read it, and my variable stays as unknown. My code is:

var tanApp = angular.module('tanApp')
.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.awesomeThings = [
  'HTML5 Boilerplate',
  'AngularJS',
  'Karma'
];
$scope.data = 'unknown';
    $http.get('http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVHOURLY/ZIP/33126/JSON?callback=callBackFn').success(function(data){
        $scope.data = data;
});
    tanApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }]);

My HTML code is {{data}}.

When I take out the "JSON" portion, it comes up as XML, since it is the default, and that is actually showing up, but I need it as JSON.

Can someone possibly get this to work or provide some help? I can offer bitcoin as a bounty.

Thanks!

Community · Accepted Answer · 2017-05-23 11:49:49Z

1

The problem is that the URI you're using returns raw JSON instead of JSONP. You can either setup a server-side proxy or check with your API provider to see if there's a way to get a valid JSONP response.

If you can get valid JSONP, you will also have to setup a callback to handle the response.

In that case, reference the accepted answer for this question.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Feb 18, 2014 at 0:58

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2259122 Over a year ago

So there is nothing I can do with the raw JSON? The API is a RESTful Data Service API, does that change anything?

Marc Kline Over a year ago

I don't see any way to get a JSONP response from their servers, and their JSON response is not returned with the necessary headers for CORS. So, it appears that your only option is to setup a proxy, either on the same domain your app is hosted on or another server that will provide you with the necessary CORS headers or valid JSONP.

user2259122 Over a year ago

I really appreciate it marck, can you point me to a resource where I can learn more about setting up this proxy?

Marc Kline Over a year ago

Check out this answer including the caveat. You may want to contact the service provider and see if they can suggest the best approach that would fit their guidelines.

user2259122 Over a year ago

Thanks Mark. I will likely contact them and see what they say.

rob · Accepted Answer · 2014-02-18 00:25:16Z

0

Have you tried this using $http.jsonp() instead of $http.get(). Also if your using $http.jsonp() then the callback should be set to "JSON_CALLBACK".

e.g.

$http.jsonp('http://iaspub.epa.gov/enviro/efservice/getEnvirofactsUVHOURLY/ZIP/33126/JSON?callback=JSON_CALLBACK')
    .success(function(data){
        $scope.data = data;
    }

answered Feb 18, 2014 at 0:25

rob

18.7k13 gold badges73 silver badges95 bronze badges

1 Comment

user2259122 Over a year ago

Still getting unknown. Not sure if maybe I have to sign up for API access?

Collectives™ on Stack Overflow

Angular.js reading External JSON Address

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related