使用angularJS从JSON url获取数据

时间:2013-01-22 19:53:18

标签: javascript json google-api angularjs

我是使用AngularJS和Javascript的新手。我需要从JSON源获取 totalResults 数据,如下所示:

{
 "queries": {
  "request": [
   {
    "totalResults": "51"
   }
  ]
 }
}

获得数据后,我需要使用AngularJS将其显示在列表中。我尝试使用.ajax和.getJSON非常努力,但鉴于我完全缺乏使用JavaScript的知识,我无法让它们中的任何一个工作。我真的很感谢你的帮助!我的AngularJS看起来像这样:

function MyController($scope){
        $scope.url = "https://www.googleapis.com/customsearch/v1?key=[MYKEY]&cx=[MYSECRETKEY]&q=flowers&alt=json&fields=queries(request(totalResults))";
        $scope.newMessage = "";
        $scope.messages = ["Steve Jobs - 515,000,000 results"]; 

        $scope.add = function(){
            $scope.messages.push($scope.newMessage);
        };
        }
  }

在HTML部分中,我有:

<input type="text" ng-model="newMessage">
    <input type="submit" ng-click="add()" value="Click to find out!">

当用户点击按钮时,我希望调用网址,$scope.newMessage应该是totalResults中的值。谢谢你的帮助!

3 个答案:

答案 0 :(得分:15)

您可以使用$http服务:Documentation

所以你可以:

$scope.add = function(){
  $http.get($scope.url).then(function(response) {
            $scope.newMessage = response.data.queries.request.totalResults;
            $scope.messages.push($scope.newMessage);
  });
};

答案 1 :(得分:1)

在AngularJS提供的$ http服务中阅读一点

这是您将使用的代码的提示

$scope.add = function(){
    $http.get(url).then(function(response){
        queries = response.queries;
        $scope.newMessage = queries.request.totalResults;
    })
}

答案 2 :(得分:1)

请参阅http://plnkr.co/edit/nZkYsxLHLvf3SZNiJKic?p=info

点击链接后,我发现了一个错误:

var x = searchResults.split('.');
如果我更换,则没有功能split():x =&#34; abc&#34;

结果: 史蒂夫乔布斯 - 515,000,000结果   - a.b结果 dsgdfg - a.b结果