如何从 AWS API Gateway 检索数据并将其显示在托管在 S3 上的静态网站中？答案

【问题标题】：How to retrieve data from AWS API Gateway and display it in static website hosted on S3?如何从 AWS API Gateway 检索数据并将其显示在托管在 S3 上的静态网站中？
【发布时间】：2020-01-15 16:31:51
【问题描述】：

我正在尝试向 AWS API Gateway 发出 ajax 请求，以显示 json 中包含的一些信息。目标是显示一个网页，当用户加载网页时，会向 API Gateway 发出 ajax 请求，API Gateway 会运行一个 lambda 函数，从 DynamoDB 中检索一些数据。像这样：网站加载->调用API网关->执行lambda函数->从DDB检索数据->数据返回到网站html并显示。传递的数据只是 JSON 格式，它包含一些条目，但我关心的只是一个 int，"int" : "1"。

以下是网站的 HTML 格式，它托管在 AWS S3 中：

<!DOCTYPE html>
<html lang="en-US">
<html>
    <head>
    </head>

    <body>
        <h1> This number was generated by the ESP32 </h1>

        <div id="entries">
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            var API_URL = 'https://xxxxxxxxxx.execute-api.us-location-x.amazonaws.com/prod/gateway';
            $(document).ready(function(){
                $.ajax({

                    url: API_URL,
                    type: 'GET',
                    dataType: 'json',

                    success: function(data){
                        $('#entries').html('');
                        $('#entries').append('<p>' + data + '</p>');
                        alert(data);
                    }
                });
            });
        </script>
    </body>
</html>

...和 lambda 函数代码

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({ region: 'us-location-x' });

exports.handler = async (event) => {
  let tableToRead = {
    TableName: 'dataStore',
    Limit: 10
  };

  const headers = {
    "Access-Control-Allow-Origin": '*'
    // other headers 
  }

  try {
    const data = docClient.scan(tableToRead).promise();
    return {
      statusCode: 200,
      body: JSON.stringify(data),
      headers: headers
    }
  } catch (error) {
    return {
      statusCode: 400,
      body: error.message,
      headers: headers
    }
  }
};

目前，如果我测试 lambda 函数（在 lambda 仪表板中），它返回 JSON 格式但正文部分为空，它只是 { }。我需要返回的数据包含标题以及来自 DynamoDB 的内容。返回看起来像这样：

Response:
{
  "statusCode": 200,
  "body": "{}",
  "headers": {
    "Access-Control-Allow-Origin": "*"
  }
}

但它应该是这样的：

Response:
{
  "statusCode": 200,
  "body": "{
    "Items": [
    {
      "Payload": {
        "int": 6
      },
      "Row": "0",
      "PositionInRow": "0"
    }
  ],
  "Count": 1,
  "ScannedCount": 1
  }",
  "headers": {
    "Access-Control-Allow-Origin": "*"
  }
}

或类似的东西...数据库中的数据无关紧要，我只需要“int”参数。这就是我在使用 lambda 时遇到的问题，我还需要知道如何将该信息获取到 HTML 文件中。目前，当我运行该网站时，它只显示 [object Object]，而它应该只显示 json 中包含的 int 的值。我什至不知道我是否走在正确的轨道上。我对 js、ajax、json 和 html 的经验很少，如果这很明显，请原谅我！感谢您的帮助！

更新：从 lambda 代码中删除 JSON.stringify(data) 并仅输入 1 使其正文包含 int 并显示在网站中。这正如预期的那样，但我只是试图一块一块地去，直到我再次打破它。

【问题讨论】：

标签： ajax amazon-web-services amazon-s3 aws-lambda amazon-dynamodb

【解决方案1】：

您可以在这里data.Items访问项目

const data = await docClient.scan(param).promise();
    return {
      statusCode: 200,
      body: data.Items,
      headers: headers
    }

所以data.Items 设置data.Item[0].Payload.int 只接收int 值。

【讨论】：

原来“返回”实际上是 json，所以只需解析/字符串化/访问属性，直到最终到达“int”并将其发送过来。现在可以使用了。