如何使用 Rails 5.2 从 Postgres 读取 json 数据到 HTML 页面？答案

【问题标题】：How read json data from Postgres to HTML page with Rails 5.2?如何使用 Rails 5.2 从 Postgres 读取 json 数据到 HTML 页面？
【发布时间】：2021-01-01 09:18:48
【问题描述】：

我正在尝试以 HTML 格式显示一个表格，其中的数据存储在 Postgres 的 json 字段中。环顾四周，这听起来很简单，但与 javascript 前端不太一致，我找不到失败的根源。这是我所做的：

在 values_lists 表中创建了 json 字段“anything”：

ALTER TABLE dqm_app.values_lists ADD COLUMN anything json;

在该字段中插入了一些演示数据：

update dqm_app.values_lists set anything = '[
{"Indice": "1","Type": "ABBREV","Title": "ShortName","Text": "UNDEF"},
{"Indice": "2","Type": "ALIAS","Title": "AliasName","Text": "UNKOWN"},
{"Indice": "3","Type": "ALIAS","Title": "FemaleName","Text": "UNDEFINED"}]'
where id = 0;

创建了一个 javascript 函数并将其插入到 Rails 部分中以显示表格：

<div id="jsonTable-container" onload="CreateTable()">
  <div id="jsonTable">
  </div>
</div>
<script>
  function CreateTable() {
    var jsonData = <%= raw this_object.anything %>;

    // Get table header
    var columns = [];
    for (var i = 0; i < jsonData.length; i++) {
      for (var key in jsonData[i]) {
        if (columns.indexOf(key) === -1) {
          columns.push(key);
        }
      }
    }

    // Create the table
    var table = document.createElement("table");

    // Create columns headers
    var tr = table.insertRow(-1);
    for (var i = 0; i < columns.length; i++) {
      var th = document.createElement("th");
      th.innerHTML = columns[i];
      tr.appendChild(th);
    }

    // Add lines to the table
    for (var i = 0; i < jsonData.length; i++) {
      tr = table.insertRow(-1);
      for (var j = 0; j < columns.length; j++) {
        var tableCell = tr.insertCell(-1);
        tableCell.innerHTML = jsonData[i][columns[j]];
      }
    }

    // Add the table to jsonTable-container
    var tableContainer = document.getElementById("jsonTable");
    tableContainer.innerHTML = "";
    tableContainer.appendChild(table);
  }
</script>

很遗憾，显示页面时，表格没有出现。

页面的源代码包含预期的数据，但格式不兼容 JSON：预期的关键标记替换为 =>

  var jsonData = [{"Indice"=>"1", "Type"=>"ABBREV", "Title"=>"ShortName", "Text"=>"UNDEF"}, {"Indice"=>"2", "Type"=>"ALIAS", "Title"=>"AliasName", "Text"=>"UNKOWN"}, {"Indice"=>"3", "Type"=>"ALIAS", "Title"=>"FemaleName", "Text"=>"UNDEFINED"}];

因此控制台发出一条消息：

Uncaught SyntaxError: missing : after property id 0:688:29

如何从 Rails 对象中检索正确的 JSON 格式数据？

感谢您的帮助！

【问题讨论】：

你能像这样使用.to_json吗：(this_object.anything).to_json
是的，raw 和 .to_json 的组合返回一个 JSON 格式的表。谢谢有限循环！
太棒了！您介意我将其添加为答案吗？如果是，您会接受它作为正确答案吗？ :)。我看到您自己添加了一个答案，但看起来您在其中使用了 .to_json。
请做！请继续关注，我可能会有另一个关于关闭主题的问题！

标签： javascript ruby-on-rails postgresql

【解决方案1】：

主要问题实际上是 Rails 提供的 JSON 数据的格式。最后，坚持使用jQuery方法，得到的代码是：

<div id="jsonTable-container">
  <div id="jsonTable">
  </div>
</div>
<script>
  (function($) {

      var jsonData = <%= raw this_object.anything.to_json %>;

      // Get table header
      var columns = [];
      for (var i = 0; i < jsonData.length; i++) {
        for (var key in jsonData[i]) {
          if (columns.indexOf(key) === -1) {
            columns.push(key);
          }
        }
      }

      // Create the table
      var table = $('<table/>', {class: 'table'});

      // Create columns headers
      var tr = $('<tr/>').appendTo(table);
      for (var i = 0; i < columns.length; i++) {
        var th = $('<th/>').appendTo(tr);
        th.html(columns[i]);
      }

      // Add lines to the table
      for (var i = 0; i < jsonData.length; i++) {
        var tr = $('<tr/>').appendTo(table);
        for (var j = 0; j < columns.length; j++) {
          var td = $('<td/>').appendTo(tr);
          td.html(jsonData[i][columns[j]]);
        }
      }

      // Add the table to jsonTable-container
      var tableContainer = $("#jsonTable");
      tableContainer.html("");
      tableContainer.append(table);

  }(jQuery));
</script>

这为我的应用程序提供了部分显示基于 JSON 数据子集的表格。部分是通过以下方式从对象显示视图调用的：

<%= render partial: "shared/json_show", locals: {this_object: @myObject} %>

这使我们的用户可以从各种对象的附加注释字段中受益。

【讨论】：

【解决方案2】：

@user1185081 看看 .to_json 方法。你可以这样使用它：

this_object.anything.to_json

to_json 方法将创建“用于通信或序列化的 JSON 字符串。”

我不确定您的 Ruby 版本，但当前稳定版本是 2.7.1。以下是 Ruby 2.0.0 版的链接，了解有关 to_json 方法的更多详细信息：

https://docs.ruby-lang.org/en/2.0.0/JSON.html#module-JSON-label-Generating+JSON

【讨论】：