Javascript 如何使用Rails 5.2将HTML表格保存为json字段

为了向ValuesList对象添加或多或少的结构化注释，我在Postgres表中添加了一个名为“anything”的JSON类型字段。我还添加了：ValuesListController强参数的任何内容

为了输入注释数据，我用JavaScript创建了一个输入字段的动态表。视图正确地发回了输入数据，但我不知道如何处理它：

我收到一个散列，但不知道如何将其格式化为JSON字段。

以下是JavaScript代码：

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

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

      // Get table header
      if (!jsonData) {
        var columns = ['Indice', 'Type', 'Title',   'Text'];
      } else {
        var columns = [];
        for (var i = 0; i < jsonData.length; i++) {
          for (var key in jsonData[i]) {
            if (columns.indexOf(key) === -1) {
              columns.push(key);
            }
          }
        }
      }
      console.log(columns)

      // 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 if data available
      if (jsonData) {
        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);
            var fieldIndex = ('anything').concat('[', (i).toString(), '][', columns[j],']');
            $('<input>').attr({
              name: fieldIndex,
              id: fieldIndex,
              type: 'text',
              value: jsonData[i][columns[j]]
            }).appendTo(td);
          }
        }
      }

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

  }(jQuery));
</script>

生成以下HTML表格表单：

<table class="table">
  <tbody>
    <tr>
      <th>Indice</th>
      <th>Type</th>
      <th>Title</th>
      <th>Text</th>
    </tr>
    <tr>
      <td><input name="anything[0][Indice]" id="anything[0][Indice]" type="text" value="1"></td>
      <td><input name="anything[0][Type]" id="anything[0][Type]" type="text" value="ABBREV"></td>
      <td><input name="anything[0][Title]" id="anything[0][Title]" type="text" value="ShortName"></td>
      <td><input name="anything[0][Text]" id="anything[0][Text]" type="text" value="UNDEF"></td>
    </tr>
Etc.

这比这篇文章的第一个版本要好得多。但我如何才能将其转换为原始数据

非常感谢

const时间表=功能（str）{
var结果；
天数=0；
const figureToControl=（h）=>{
var g=“”；
如果（！Number.isNaN（+h）==true）{
数量（h）；
对于（h>0；h--；）{
g+=''；
}
}
否则{
g=`${h}`；
}
返回g
}
常数运算=（a，c）=>{
天++；
结果=a.push（`${c.split（''，'））.reduce（（g，h）=>（g.push（figureToControl（h）），g），[]）。join（'''}'））
返回结果
}
var tableText=''；
tableText+=str.split（'/'）。reduce（（a，c）=>（operate（a，c），a），[]）。join（“”）；
返回tableText+“”；
}
控制台日志（时间表（“1,9F，6/8/10E，9D，2,9E，10E，2/2,9F，2,9S，2/8/10E，9D，9E，2,9S，2”）如果我将表存储在字符串中，并使用纯js将表显示出来，是否可以？这是一个有趣的选项。在将数据发送回控制器之前，是否可以在提交时执行此操作？
<table class="table">
  <tbody>
    <tr>
      <th>Indice</th>
      <th>Type</th>
      <th>Title</th>
      <th>Text</th>
    </tr>
    <tr>
      <td><input name="anything[0][Indice]" id="anything[0][Indice]" type="text" value="1"></td>
      <td><input name="anything[0][Type]" id="anything[0][Type]" type="text" value="ABBREV"></td>
      <td><input name="anything[0][Title]" id="anything[0][Title]" type="text" value="ShortName"></td>
      <td><input name="anything[0][Text]" id="anything[0][Text]" type="text" value="UNDEF"></td>
    </tr>
Etc.

params[:anything]
<ActionController::Parameters {"0"=>{"Indice"=>"1", "Type"=>"ABBREV", "Title"=>"ShortName", "Text"=>"UNDEF"}, "1"=>{"Indice"=>"2", "Type"=>"ALIAS", "Title"=>"AliasName", "Text"=>"UNKOWN"}, "2"=>{"Indice"=>"3", "Type"=>"ALIAS", "Title"=>"FemaleName", "Text"=>"UNDEFINED"}} permitted: false>

{"0":{"Indice":"1","Type":"ABBREV","Title":"ShortName","Text":"UNDEF"},"1":{"Indice":"2","Type":"ALIAS","Title":"AliasName","Text":"UNKOWN"},"2":{"Indice":"3","Type":"ALIAS","Title":"FemaleName","Text":"UNDEFINED"}}