user3438917 user3438917 - 2 months ago 6
AngularJS Question

Displaying data from JSON in AngularJS

I feel like I'm missing something obvious here, but I can't render the JSON data to the page, only able to out put the JSON formatted data, and not just specific keys (e.g., Name: Abbey Malt).

This is my controller:

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


And the 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>


Lastly, here's a screenshot of the console and how the JSON object is structured:
enter image description here

Answer

Try to change your code to

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

and view

<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>
Comments