英文:
Facing an issue with in the frontend, data retrieved from AWS DynamoDB using AWS Lambda though Function URL is not displayed
问题
我正在尝试为我的作品集设置一个查看器计数器，使用AWS Dynamo DB和AWS Lambda，借助Function URL的帮助。AWS Lambda正常工作，但当使用JavaScript调用它时，它显示错误"Failed to Fetch"，但Lambda函数正常工作，它获取并更新了DynamoDB。
一切都正常，我的DynamoDB表如下所示，忽略第一行图片描述在这里，我的Lambda代码如下：
import json
import boto3
dynamodb = boto3.resource('dynamodb')
ddbTableName = 'Cloud-resume'
table = dynamodb.Table(ddbTableName)
def lambda_handler(event, context):
response = table.get_item(Key={'id': 'count'})
count = response["Item"]["vistor_count"]
new_count = str(int(count) + 1)
response = table.update_item(
Key={'id': 'count'},
UpdateExpression='set vistor_count = :c',
ExpressionAttributeValues={':c': new_count},
ReturnValues='UPDATED_NEW'
)
return {'Count': new_count}
我添加了一个JavaScript代码来从DynamoDB中检索数据并使用Lambda，使用以下代码：
<script>
fetch('xyz.lambda-url.us-east-1.on.aws/')
.then(response => response.json())
.then((data) => {
document.getElementById('visitor_counter').innerText = data.Count;
})
</script>
我创建了一个HTML标签来显示查看器计数：
<p id="visitor_counter">Viewer count</p>
我的Lambda正常工作，它在URL中显示输出，我只是看不到作品集中的查看器计数，我已经尝试调试了几个小时，请帮忙，谢谢！！！
英文:
I'm trying to setup a viewer count for my portfolio, using AWS dynamo DB and AWS lambda with the help of Function URL. the AWS lambda works fine but when it is called by using JavaScript it shows the error "Failed to Fetch" but the Lambda function works, it fetches and update the DynamoDB.
everything works fine my DynamoDB table looks like this ignore the first rowenter image description here my lambda code is this
I'm trying to setup a viewer count for my portfolio, using AWS dynamo DB and AWS lambda with the help of Function URL. the AWS lambda works fine but when it is called by using JavaScript it shows the error "Failed to Fetch" but the Lambda function works, it fetches and update the DynamoDB.import json
import boto3
dynamodb = boto3. resource('dynamodb')
ddbTableName = 'Cloud-resume'
table = dynamodb.Table(ddbTableName)
def lambda_handler(event, context):
response = table.get_item(Key= {'id': 'count'})
count = response["Item"]["vistor_count"]
new_count = str(int(count)+1)
response = table.update_item(
Key={'id': 'count'},
UpdateExpression='set vistor_count = :c',
ExpressionAttributeValues={':c':new_count},
ReturnValues='UPDATED_NEW'
)
return {'Count':new_count}
I added a JavaScript code to retrieve the data from DynamoDB using lambda using this code
<script>
fetch('xyz.lambda-url.us-east-1.on.aws/')
.then(response => response.json())
.then((data) => {
document.getElementById('visitor_counter').innerText = data.count
})
</script>
I have created a HTML tag to show the viewer count
<p id="visitor_counter">Viewer count</p>
my lambda works fine, it shows the output in the URL, I just don't see the viewer count in the portfolio, i have been trying to debug this for hours please help , THANK YOU!!!!
答案1
得分: 1
Casing matters in objects, and your casing seems wrong. In your lambda, you return this response:
{'Count': new_count}
But in your JS code, you use count with a lower case c:
document.getElementById('visitor_counter').innerText = data.count
Change the casing of one or the other to match, for example your JS to this:
document.getElementById('visitor_counter').innerText = data.Count
Furthermore, you don't need to issue the GetItem request, just work with the UpdateItem:
response = table.update_item(
Key={'id': 'count'},
UpdateExpression='set visitor_count = visitor_count + :c',
ExpressionAttributeValues={':c': 1},
ReturnValues='UPDATED_NEW'
)
return {'Count': response['Attributes']['visitor_count']}
This will save you both on capacity costs but more importantly, latency.
英文:
Casing matters in objects, and your casing seems wrong. In your lambda, you return this response:
{'Count':new_count}
But in your JS code, you use count with a lower case c:
document.getElementById('visitor_counter').innerText = data.count
Change the casing of one or the other to match, for example your JS to this:
document.getElementById('visitor_counter').innerText = data.Count
Furthermore, you don't need to issue the GetItem request, just work with the UpdateItem:
response = table.update_item(
Key={'id': 'count'},
UpdateExpression='set vistor_count = visitor_count + :c',
ExpressionAttributeValues={':c' : 1},
ReturnValues='UPDATED_NEW'
)
return {'Count':response['Attributes']['visitor_count']}
This will save you both on capacity costs but more importantly, latency.
答案2
得分: 0
你有在浏览器开发工具中检查你的URL响应吗？它应该显示为一个网络请求，你可以看到从你的函数返回的实际数据。
话虽如此，看起来你正在返回：
{'Count': new_count}
大小写很重要，所以你的更新代码应该是：
document.getElementById('visitor_counter').innerText = data.Count
而不是
document.getElementById('visitor_counter').innerText = data.count
英文:
Have you checked to see in the browser dev tools what the response is from your URL? It should show up as a network request and you can see the actual data returned from your function.
That being said it looks like you're returning
{'Count':new_count}
Casing matters here so your code to update should actually be
document.getElementById('visitor_counter').innerText = data.Count
not
document.getElementById('visitor_counter').innerText = data.count
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论