在AngularJS中显示JSON中的数据

我觉得这里缺少了一些明显的东西，但我无法将JSON数据呈现到页面，只能输出JSON格式的数据，而不仅仅是特定的键（例如，Name:Abbey Malt）

这是我的控制器：

app.controller('beerController', function($scope, $http, $modal) {
$http.get("http://api.brewerydb.com/v2/fermentables", {
    params: {
      key: 'xxx'
    }
  })
  .then(function(response) {
    $scope.response = response.data.name;
    console.log(response);
  });
};

以及HTML：

    <div ng-controller="beerController">
    <div class="container">
      <h3>Latest Releases ({{currentPage}} pages)</h3>
      <div class="row">
        <div ng-repeat="items in response">
          <li>{{data.name}}</li>
        </div>
      </div>
    </div>
</div>

最新版本（{currentPage}}}页）
{{data.name}

最后，这里是控制台的屏幕截图以及JSON对象的结构：

---

把它放在你的控制器上：

$scope.items = response.data.data;

html是这样的

<div ng-repeat="item in items">
    <li>{{item.name}}</li>
</div>

{{item.name}

把它放在你的控制器上：

$scope.items = response.data.data;

html是这样的

<div ng-repeat="item in items">
    <li>{{item.name}}</li>
</div>

{{item.name}

尝试将代码更改为

app.controller('beerController', function($scope, $http, $modal) {
    $http.get("http://api.brewerydb.com/v2/fermentables", {
        params: {
          key: 'xxx'
        }
      })
      .then(function(response) {
        $scope.response = response.data.data;
        console.log(response);
      });
    };

和视图

<div>
    <div ng-controller="beerController">
    <div class="container">
      <h3>Latest Releases ({{currentPage}} pages)</h3>
      <div class="row">
        <div ng-repeat="item in response">
          <li>{{item.name}}</li>
        </div>
      </div>
    </div>
</div>

最新版本（{currentPage}}}页）
{{item.name}

尝试将代码更改为

app.controller('beerController', function($scope, $http, $modal) {
    $http.get("http://api.brewerydb.com/v2/fermentables", {
        params: {
          key: 'xxx'
        }
      })
      .then(function(response) {
        $scope.response = response.data.data;
        console.log(response);
      });
    };

和视图

<div>
    <div ng-controller="beerController">
    <div class="container">
      <h3>Latest Releases ({{currentPage}} pages)</h3>
      <div class="row">
        <div ng-repeat="item in response">
          <li>{{item.name}}</li>
        </div>
      </div>
    </div>
</div>

最新版本（{currentPage}}}页）
{{item.name}

我离得太近了！谢谢我是如此接近！谢谢@用户3438917您是否清楚为什么这是正确答案？看起来API返回的对象

数据
是一个数组。Angular本身将JSON反序列化为
resonse.data
。所以它变成了
response.data.data
。然后，您将迭代在控制器中公开的项目。您将每个项目引用为
项目
。然后，您可以作为
项访问
名称
。name
@user3438917您是否清楚为什么这是正确的答案？看起来API返回的对象
数据
是一个数组。Angular本身将JSON反序列化为
resonse.data
。所以它变成了
response.data.data
。然后，您将迭代在控制器中公开的项目。您将每个项目引用为
项目
。然后，您可以将
名称
作为
项访问。名称
。