如何使用 Rails 5.2 從 Postgres 讀取 json 數據到 HTML 頁面？

Question

我正在嘗試以 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"}];

因此控制台發出一條消息：

未捕獲的語法錯誤：丟失：在屬性 ID 0:688:29 之后

如何從 Rails 對象中檢索正確的 JSON 格式的數據？

謝謝你的幫助！

Answer 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} %>

這使我們的用戶可以從各種對象上的附加注釋字段中受益。

Answer 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