Отображение данных из JSON в AngularJS

Question

Отображение данных из JSON в AngularJS

0

Я чувствую, что мне не хватает чего-то очевидного здесь, но я не могу отображать данные 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>

Наконец, вот скриншот консоли и как структурирован объект JSON:

user3438917 06 сен. 2016, в 18:01

Источник

Теги:

angularjs

json

2 ответа

5

поставьте это на свой контроллер:

$scope.items = response.data.data;

и html будет так

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

pachon_1992 06 сен. 2016, в 13:39

0

@ user3438917 тебе понятно, почему это правильный ответ? Похоже, API возвращает объектные data которые являются массивом. Сам по себе Angular будет десериализовать JSON как resonse.data . Таким образом, это становится response.data.data . Затем вы перебираете элементы, выставленные в вашем контроллере. Вы ссылаетесь на каждый элемент как на item . Затем вы можете получить доступ к name как item.name .
Martin 06 сен. 2016, в 15:26

Ещё вопросы

@ user3438917 тебе понятно, почему это правильный ответ? Похоже, API возвращает объектные data которые являются массивом. Сам по себе Angular будет десериализовать JSON как resonse.data . Таким образом, это становится response.data.data . Затем вы перебираете элементы, выставленные в вашем контроллере. Вы ссылаетесь на каждый элемент как на item . Затем вы можете получить доступ к name как item.name .

NikedLab · Accepted Answer · 2016-09-06T13-14-00.000Z

Попробуйте изменить свой код на

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>