オブジェクトを表示/ htmlで表示しない

Question

私は、オブジェクトから情報を表示しようとしています.2つの配列を持っています.JMSのコンソールログでオブジェクトを見ることができるのでsemnmが動作しています。それは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

あなたの問題は、応答の割り当てである - それは次のようになります - としてdataを含む、あなたの応答は、オブジェクトがあるので、あなたのコンソールで、あなたの配列を確認するためにdataを展開する必要がどのように

$scope.books = response.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; 
    }); 
    } 

}]);