Check out this URL that shows JSON data in the browser:
I attempted to store the data in a variable with the following code:
$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>
However, nothing seems to be displayed. Any suggestions on what could be going wrong?
I also experimented with this approach:
$http.jsonp('http://api.geosvc.com/rest/US/84606/nearby?apikey=4ff687893a7b468cb520b3c4e967c4da&d=20&pt=PostalCode&format=json').then(function(response) {
$scope.zipCodes = response;
});
Furthermore, I attempted to use AngularJS resource but it's giving me an undefined result:
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;