将 AWS MySQL 查询的 JSON 输出并在网页上显示为 DataTable答案

【问题标题】：Taking JSON output of AWS MySQL query and surfacing as DataTable on web page将 AWS MySQL 查询的 JSON 输出并在网页上显示为 DataTable
【发布时间】：2020-03-27 15:38:42
【问题描述】：

我已通过 AWS API Gateway 成功地将网页连接到 Lambda 函数，以在 Aurora Serverless MySQL 数据库上调用 SQL 查询。我只是将完整的返回 JSON（以字符串形式）传递给网页，它显示如下：

根据查询，列可能会有所不同。我希望能够获取响应输出并使用网站上的 DataTable 将其可视化。有没有办法动态创建 DataTable，大概是通过访问 JSON 对象中的特定键（不是字符串形式）？

免责声明：除此之外，我对 JavaScript/jQuery/JSON 格式的经验很少。

更新

我更新了我的代码，现在输出显示在两个文本框中（我的目标是获取列名和相应数据的列表，并根据查询结果动态构建 DataTable）。下图显示了顶部文本框中的列标题和 JSON 中记录字典中的单个值。示例代码如下。

var DisplayQuery;
(function($) {
  DisplayQuery = function() {
    $.ajax({
      method: 'POST',
      url: '***',
      beforeSend: function(xhr) {
        xhr.setRequestHeader("access-control-allow-origin", "*")
            },
      data: JSON.stringify({
        "sqlStatement": $('#sql-placeholder').val()
      }),
      contentType: 'application/json',
      success: function(response) {
        var colLabels = [];
        for (i = 0; i < response.sqlStatementResults[0].resultFrame.resultSetMetadata.columnMetadata.length; i++) {
          colLabels.push(response.sqlStatementResults[0].resultFrame.resultSetMetadata.columnMetadata[i].name)
        };
        $('#test-box-1').text(JSON.stringify(colLabels));
        $('#test-box-2').text(JSON.stringify(response.sqlStatementResults[0].resultFrame.records[0]));
      },
      error: function ajaxError(error) {
        console.error('Error in SQL request');
      }
    })
  }
}(jQuery));

我的 index.html 中的相应元素如下。我还没有为要在此处创建的 DataTable 创建元素。

<div class="container-fluid">
   <p class= "test-box-class" id="test-box-1"><i>This is a test box for database query connection</i></p>
</div>

<div class="container-fluid">
   <p class= "test-box-class" id="test-box-2"><i>This is a test box for database query connection</i></p>
</div>

【问题讨论】：

你能发一些代码吗
@ArunmainthanKamalanathan 我已经根据目前的进展发布了一些额外的信息
你在说这个数据表吗datatables.net/manual/installation
@ArunmainthanKamalanathan 我相信是这样......我不完全确定我想，我试图用 Bootstrap 配置我的网页，我看到了这个：datatables.net/examples/styling/bootstrap4——只要我能使用 CSV 导出选项在页面上的表格中动态显示查询结果，这对我来说很好！我假设为这些事情提供的这种 DataTable 格式可以轻松完成。
关键主要是根据指定的查询，列可能会发生变化。

标签： javascript jquery json bootstrap-4 datatables

【解决方案1】：

以下是您可以如何使用数据表。你需要先在你的 html 中声明一个 div 来显示数据表。

<div class="container-fluid">
  <div id="data-table-container"></div>
</div>

然后在您的 jquery 代码中，初始化 DataTable

$.ajax({
  method: 'POST',
  url: '***',
  success: function (response) {

    // format the column labels to [{data: 'Column Name 1'}]
    const colLabels = response.sqlStatementResults[0].resultFrame.resultSetMetadata.columnMetadata.map(value => {
      return {
        data: value
      }
    })

    $('#data-table-container').DataTable({
      data: JSON.stringify(response.sqlStatementResults[0].resultFrame.records),
      columns: colLabels
    })

  },
  error: function ajaxError(error) {

  }
})

这里是文档 https://datatables.net/manual/data/

【讨论】：