Question

我正在使用BreweryDB API，我甚至无法在我的简单应用程序中显示响应。

这是包含控制器的app.js文件。我只是使用HTTP GET来加载API数据。

angular.module('BreweryGuideApp', [])
  .controller('BreweryGuideController', function($scope, $http){
    var pendingTask;

    if($scope.search === undefined){
      $scope.search = "300 Suns Brewing"; // init search bar data
      fetch(); // call fetch function
    }

    $scope.change = function(){
      if(pendingTask){
        clearTimeout(pendingTask);
      }
      pendingTask = setTimeout(fetch, 800);
    };

    function fetch(){
      $http.get("https://api.brewerydb.com/v2/brewery/x4vqAl?key=cc12540abedfa669021307d4ba111d87&format=json")
       .success(function(response){  $scope.details = response.data; }); //get API response on success
    } //end fetch

  }); // end controller

这是HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title ng-bind="'Brewery.Guide - ' + data.name"></title>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
</head>

<body ng-app="BreweryGuideApp" ng-controller="BreweryGuideController">
    <div class="container-fluid outerdiv">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#"><b>Brewery.Guide</b> <span class="span-style">Get Yer Drink On</span></a>
          </div>
        </div>
      </nav>

      <noscript>
        <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
      </noscript>

      <div class="animated zoomInRight">
        <div class="input-group search-bar">
          <input type="text" ng-model="search" ng-change="change()" onclick="select()" class="form-control" placeholder="Enter brewery name" autofocus />
          <span class="input-group-addon bar-style"><i class="glyphicon glyphicon-search"></i></span>
        </div>

        <div id="main-info" ng-include="'partials/main-info.html'" class="col-md-8"></div>

        <div id="related-results" ng-include="'partials/related-results.html'" class="col-md-4 animated bounce related-results"></div>
      </div>
    </div>

    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

这是使用main-info.html指令插入的ng-include：

<div ng-if="details.status!=verified">
  Loading results...
</div>

<div ng-if="data.status==verified">
  <span class="span-outer">
    {{ data.status }}
    <a href="{{ data.website }}" target="_blank">{{ data.name }}</a>
  </span>
</div>

以下是我在app.js中使用的网址获取的数据：

{
  "message":"Request Successful",
  "data":{
    "id":"x4vqAl",
    "name":"300 Suns Brewing",
    "description":"300 Suns Brewing was really just an idea brought up years ago, that kept surfacing every time a brewery was toured, a GABF was attended, a new craft beer was tasted, a bottle of homebrew was shared on the back deck in the cool summer evening air. It was just a dream and one day (gulp), we worked up the nerve to make it a reality. We wanted to put our time and our work into something that brought joy to others the way those moments brought joy to us. And we wanted to give our community very meaningful ways that they could become part of the shaping of our brewery.",
    "website":"http:\/\/www.300sunsbrewing.com",
    "established":"2014",
    "isOrganic":"N",
    "images":{
      "icon":"https:\/\/s3.amazonaws.com\/brewerydbapi\/brewery\/x4vqAl\/upload_fI8k35-icon.png",
      "medium":"https:\/\/s3.amazonaws.com\/brewerydbapi\/brewery\/x4vqAl\/upload_fI8k35-medium.png",
      "large":"https:\/\/s3.amazonaws.com\/brewerydbapi\/brewery\/x4vqAl\/upload_fI8k35-large.png"
    },
    "status":"verified",
    "statusDisplay":"Verified",
    "createDate":"2014-05-05 12:24:15",
    "updateDate":"2015-08-14 16:49:36"
  },
  "status":"success"
}

很简单，但我甚至无法加载任何数据。搜索输入字段实际上是无关紧要的，但我将其包含在可能导致问题的情况下。

Answer 1

您在HTML中将details称为data。但是，在controller.js中，您没有像$scope.data这样的变量。这就是你无法加载数据的原因。为了让HTML或模板可以访问变量，您可以在$scope.（使用$ scope点表示法）格式中声明变量。

由于您使用的是$http().success()方法，因此会向您返回数据，因此您不会执行$scope.details = response.data，而应该执行$scope.details = response;

Controller.js

function fetch(){
  $http.get("https://api.brewerydb.com/v2/brewery/x4vqAl?key=cc12540abedfa669021307d4ba111d87&format=json")
   .success(function(data) {  
     $scope.details = data; 
   });
} //end fetch

HTML

<div ng-if="details.status!=verified">
  Loading results...
</div>

<div ng-if="details.status==verified">
  <span class="span-outer">
    {{ details.status }}
    <a href="{{ details.website }}" target="_blank">{{ details.name }}</a>
  </span>
</div>

我无法从我的简单应用程序中获得BreweryDB API的响应

1 个答案: