我正在学习使用Amazon Web Services的API网关,DynamoDB和Lambda构建API .
我一直关注Youtube上的视频播放列表教程 . 到目前为止,我已经创建了所需的Lambda函数,DynamoDB表以及API网关 .
现在我需要做的就是构建一个前端,在表格和条目中显示我当前的项目 .
到目前为止,我已经完成了这部分here .
在视频中,他使用JavaScript来发出ajax请求并获取DynamoDB表中的项目 . 我用html编写了相同的ajax请求 .
<html>
<head>
<h1 style="color:rosybrown;">Latest guestbook entries:</h1>
</head>
<body>
<div id="entries">
</div>
<h1>New Entry</h1>
<form>
<label for="msg">Message</label>
<textarea id="msg"></textarea>
<button id="submitButton">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var API_URL = "someURL/prod/entries";
$(document).ready(function(){
$.ajax({
type: "GET",
url: API_URL,
success: function(data){
$("#entries").html("");
data.Items.forEach(function(guestbookItem){
$("#entries").append("<p>"+guestbookItem+"</p>");
})
}
});
});
</script>
</body>
所以我在这里解释一下我的目的 . 目标是显示我创建的DynamODB表中的项目,同时接受新条目 . 它有一个 date
和 message
项 .
API网关具有 /entries
资源,有两种方法, GET
和 POST
. /prod
表示它已部署在 生产环境 阶段 .
调用 GET
方法的URL时 . 我收到这个输出
"{\"Items\": [{\"date\": 20180512, \"message\": \"this is my 4th message\"}, {\"date\": 20180513, \"message\": \"I love AWS\"}], \"Count\": 2, \"ScannedCount\": 2, \"ResponseMetadata\": {\"RequestId\": \"SOME_REQUEST_ID\", \"HTTPStatusCode\": 200, \"HTTPHeaders\": {\"server\": \"Server\", \"date\": \"Mon, 14 May 2018 20:32:43 GMT\", \"content-type\": \"application/x-amz-json-1.0\", \"content-length\": \"160\", \"connection\": \"keep-alive\", \"x-amzn-requestid\": \"SOME_REQUEST_ID\", \"x-amz-crc32\": \"2401247050\"}, \"RetryAttempts\": 0}}"
但是,在我的本地主机上运行 index.html
文件之后 .
条目没有出现 . 当我检查控制台时,结果是我收到以下错误
index.html:33 Uncaught TypeError: Cannot read property 'forEach' of undefined
at Object.success (index.html:33)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)
我不确定发生了什么事 . Items
确实存在于响应中 . 我已经坚持了几天 . 如果有人能指出我错过了什么,我将不胜感激!