Не отображает объект in view/html angular

Question

Я изучаю MEAN, я пытаюсь отобразить информацию с объекта, у него есть 2 массива, он работает semms, потому что я вижу объект с консольным журналом Javascript но он не отображается в html.

Мой код из JavaScript (books.js)

var myApp = angular.module('myApp'); 

myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){ 
    console.log("BooksController loaded"); 

    $scope.getBooks = function(){ 
    $http.get('/api/books') 
    .then(function(response){ 
     console.log(response) 
     $scope.books = response; 
    }); 
    } 

}]); 

Мой код от HTML (book.html)

<div class="panel panel-default" ng-init="getBooks()"> 
    <div class="panel-heading"> 
    <h3 class="panel-title">Latest Books</h3> 
    </div> 
    <div class="panel-body"> 
    <div class="row"> 
     <div ng-repeat="book in books"> 
     <div class="col-md-3"> 
      <div class="col-md-6"> 

      {{book.title}} 
      <p> 
       {{book.description}} 
      </p> 
      </div> 
      <div class="col-md-6"> 
      <img src="{{book.image_url}}" /> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Изображение Получение данных с консоли

Screenshot of object

Вопрос: я не могу понять, как его решить, потому что он не отображает i n book.html.

Screenshot of book.html

Я надеюсь, что кто-то может мне помочь.

Благодарим за помощь.

Answer 1

Ваша проблема уступка ответа - это должно быть:

$scope.books = response.data; 

Обратите внимание, как в консоли вы должны расширить data увидеть ваш массив - потому что ваш ответ является объектом, содержащим data как ключ с вашим массивом.

Answer 2

Вам нужно присвоить ему значение response.data

var myApp = angular.module('myApp'); 

    myApp.controller('BooksController', ['$scope', '$http', '$location', '$routeParams',function($scope, $http, $location, $routeParams){ 
    console.log("BooksController loaded"); 
    $scope.books = ''; 
    $scope.getBooks = function(){ 
    $http.get('/api/books') 
    .then(function(response){ 
     console.log(response) 
     $scope.books = response.data; 
    }); 
    } 

}]);