在AngularJS中显示JSON中的数据

时间:2016-09-06 15:11:22

标签: angularjs json

我觉得我在这里遗漏了一些明显的东西,但是我无法将JSON数据呈现给页面,只能输出JSON格式的数据,而不仅仅是特定的键(例如,名称) :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>

最后,这里是控制台的屏幕截图以及JSON对象的结构: enter image description here

2 个答案:

答案 0 :(得分:5)

把它放在你的控制器上:

arduino

和html会是这样的

$scope.items = response.data.data;

答案 1 :(得分:1)

尝试将代码更改为

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>