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

Posted 2023-05-08

【中文标题】将 AWS MySQL 查询的 JSON 输出并在网页上显示为 DataTable

【英文标题】：Taking JSON output of AWS MySQL query and surfacing as DataTable on web page

【发布时间】：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 格式可以轻松完成。

关键主要是根据指定的查询，列可能会发生变化。

【参考方案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/