AngularJS getting JSON data from external URL

Question

Here is the URL, which in the browser renders as JSON:

http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&d=20&pt=PostalCode&format=json

Here is what I tried to store the data in a variable:

$http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&d=20&pt=PostalCode&format=json').then(function(response) {
            $scope.zipCodes = response;
          });

Here is the HTML where I tried to display it:

<pre>zipCodes {{zipCodes | json}}</pre>

But nothing displays, any idea what I'm doing wrong?

I also tried this:

$http.jsonp('http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&d=20&pt=PostalCode&format=json').then(function(response) {
                $scope.zipCodes = response;
              });

I've also tried AngularJS resource but that is also returning undefined:

var zipCodes = $resource("http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&d=20&pt=PostalCode&format=json",
            { callback: "JSON_CALLBACK" },
            { get: { method: "JSONP" }}
            );
        zipCodes.get({}, function(zipCode){
            console.debug(zipCode.PostalCode);
        });
        console.debug(zipCodes.get());
        $scope.zipCodes = zipCodes.get().results;

$scope.zipCodes = response; should be changed to $scope.zipCodes = response.data; — Pankaj Parkar
– Pankaj Parkar, Commented May 7, 2015 at 22:22

Pankaj Parkar · Accepted Answer · 2015-05-07 22:26:27Z

3

You need to use response.data because while using .then you get all 4 parameter inside response object namely data, status, headers, config

$scope.zipCodes = response.data;

Alternative

You could do use success or error function

$http.get('http://api.geosvc.com/rest/US/84606/nearby?apikey=485a35b6b9544134b70af52867292071&d=20&pt=PostalCode&format=json')
.success(function(data, status, headers, config) {
     $scope.zipCodes = data;
})
.error(function(error, status, headers, config) {
     console.log(status);
     console.log("Error occured");
});

edited May 7, 2015 at 22:26

answered May 7, 2015 at 21:54

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

9 Comments

Jordash Over a year ago

Ok, it's logging an error, i'm not sure why because the url is valid json

Jordash Over a year ago

"NetworkError: 403 Forbidden - api.geosvc.com/rest/US/84606/…"

Pankaj Parkar Over a year ago

@Jordash that what I was afraid of..that is CORS issue..you need to implement jsonp on server side

Jordash Over a year ago

Ok it's not returning that error anymore, that was from a bad API key, now it's just logging an error, but not giving any reason.

Pankaj Parkar Over a year ago

which error its logging..it should show it in console//

|

chetank · Accepted Answer · 2015-05-07 21:56:56Z

0

what is the filter json doing there?. if you hit the url what you get is the array of elements. Just try printing

<pre>zipCodes {{zipCodes}}</pre>

and then if you want to print anything else you can iterate over it using ng-repeat and display it as you need.

answered May 7, 2015 at 21:56

chetank

4024 silver badges17 bronze badges

Collectives™ on Stack Overflow

AngularJS getting JSON data from external URL

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related