Как извлечь данные из AWS API Gateway и отобразить их на веб-сайте stati c, размещенном на S3? - PullRequest
Новая
       7

Как извлечь данные из AWS API Gateway и отобразить их на веб-сайте stati c, размещенном на S3?

1 голос
/ 15 января 2020

Я пытаюсь сделать ajax запрос к AWS API Gateway для отображения некоторой информации, содержащейся в json. Цель состоит в том, чтобы отобразить веб-страницу, когда пользователь загружает веб-страницу, в API Gateway делается запрос ajax, который запускает лямбда-функцию, которая извлекает некоторые данные из DynamoDB. Примерно так: загруженный веб-сайт -> вызывается API-шлюз -> выполняется лямбда-функция -> данные извлекаются из 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>

... и код лямбда-функции 

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
    }
  }
};

В данный момент, если я проверяю лямбда-функцию (в лямбда-панель () возвращает формат 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 параметр. Это просто проблема, которую я имею с лямбда, мне также нужно знать, как получить эту информацию в файл HTML. В тот момент, когда я запускаю веб-сайт, он просто отображает [object Object], когда он должен просто отображать значение int, которое содержится в json. Я понятия не имею, нахожусь ли я даже на правильном пути. У меня мало опыта с js, ajax, json и html, простите, если это очевидно! Спасибо за любую помощь!

Обновление: удаление JSON.stringify(data) из лямбда-кода и просто ввод 1 делает его таким, чтобы тело содержало int и отображалось на веб-сайте. Это, как и ожидалось, но я просто пытаюсь go по частям, пока не сломаю его снова.

1 Ответ

1 голос
/ 16 января 2020

Вы можете получить доступ к пунктам здесь 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 значение.

...