使用AJAX/jQuery解析JSON不顯示

Question

使用API​​拉起電影引號做一個小的任務，沒有看到我在做什麼錯誤的代碼。任何人都可以將我指向正確的方向嗎？

<div class="col-md-6" id="quoteOutput"> 

    <br> 
    <div id="singleQuote"></div> 
</div> 

<div class="col-md-3" id="qwe"></div> 

</div> 
</body> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
</script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script src="https://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js"></script> 

<script> 
    $.ajax({ 
     type: "GET", 
     url: "https://movie-quotes-2.herokuapp.com/api/v1/quotes/1", 
     dataType: "json", 
     cache: false, 
     success: function(data) { 
      console.log(data); 
      for (var i = 0; i < data.length; i++) { 
       $("#singleQuote").append("<div><h1>" + data.response.film + "</h1></div><br>"); 
       $("#singleQuote").append("<div>" + data.response.content + "</div>"); 
       $("#singleQuote").append("<div>" + data.response.character + "</div>"); 
       $("#singleQuote").append("<div>" + data.response.actor + "</div>"); 
       $("#singleQuote").append("<hr>"); 
      } 
     } 
    }); 
</script> 

Answer 1

success: function(data) { 
console.log(data); 
//for (var i = 0; i < data.length; i++) { 
    $("#singleQuote").append("<div><h1>" + data.film + "</h1></div><br>"); 
    $("#singleQuote").append("<div>" + data.content + "</div>"); 
    $("#singleQuote").append("<div>" + data.character + "</div>"); 
    $("#singleQuote").append("<div>" + data.actor + "</div>"); 
    $("#singleQuote").append("<hr>"); 
//} 
};