current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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;
share|improve this question
1  
$scope.zipCodes = response; should be changed to $scope.zipCodes = response.data; – Pankaj Parkar May 7 '15 at 22:22
up vote 3 down vote

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");
});
share|improve this answer
    
Ok, it's logging an error, i'm not sure why because the url is valid json – Jordash May 7 '15 at 22:05
    
what is error in console? looks like cors issue – Pankaj Parkar May 7 '15 at 22:06
    
"NetworkError: 403 Forbidden - api.geosvc.com/rest/US/84606/…; – Jordash May 7 '15 at 22:07
    
@Jordash that what I was afraid of..that is CORS issue..you need to implement jsonp on server side – Pankaj Parkar May 7 '15 at 22:09
    
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. – Jordash May 7 '15 at 22:19
up vote 0 down vote

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.

share|improve this answer
    
The json filter just makes it easier to read in the browser. – Jordash May 7 '15 at 22:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.