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

我试图用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>

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

未捕获的语法错误：缺少：在属性id 0:688:29之后

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

---

谢谢你的帮助

主要问题实际上是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>

（函数（$）{
var jsonData=；
//获取表格标题
var列=[]；
对于（var i=0；i

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

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

---

这使得我们的用户可以从各种对象上的附加anotation字段中获益。

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

this_object.anything.to_json

to_json

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

我不确定您的Ruby版本，但在撰写本文时，当前的稳定版本是2.7.1。以下是Ruby 2.0.0版的链接，以获取有关to_json方法的更多详细信息：

---

您可以像这样使用.to\u json:（this\u object.anything）to\u jsonYes，raw和.to\u json的组合返回一个json格式的表。谢谢Finiteloop！令人惊叹的！你介意我加上这个作为答案吗？如果是的话，你会接受它作为正确的答案吗？：）。我看到你自己添加了一个答案，但它看起来像是你使用的。to_json在其中。请这样做！请继续关注，我可能会有另一个关于密切话题的问题！

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