不顯示在視圖中的對象/ html的角度

Question

我正在學習平均水平，我試圖顯示來自對象的信息，它有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）與控制檯

Screenshot of object

獲取數據的

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

圖片

問題是我無法弄清楚如何解決它，因爲它不顯示我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; 
    }); 
    } 

}]);