AngularJS从外部URL获取JSON数据

时间:2015-05-07 21:51:52

标签: javascript json angularjs

这是URL,在浏览器中呈现为JSON:

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

以下是我尝试将数据存储在变量中的内容:

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

以下是我尝试显示它的HTML:

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

但没有任何表现,不知道我做错了什么?

我也试过这个:

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

我也尝试过AngularJS资源,但也返回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;

2 个答案:

答案 0 :(得分:3)

您需要使用response.data,因为在使用.then时,您会在response对象中获取所有4个参数,即datastatusheadersconfig

$scope.zipCodes = response.data;

<强>替代

您可以使用successerror功能

$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");
});

答案 1 :(得分:0)

什么是过滤器json在那里做什么?如果你点击url你得到的是元素数组。试试打印

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

然后如果你想打印任何其他东西,你可以使用ng-repeat迭代它并根据需要显示它。