如何使用 Rails 5.2 将 HTML 表格形式保存为 json 字段答案

【问题标题】：How to save HTML table form as a json field with Rails 5.2如何使用 Rails 5.2 将 HTML 表格形式保存为 json 字段
【发布时间】：2020-09-16 09:20:38
【问题描述】：

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

为了输入注释数据，我使用 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>

示例 JSON 数据：

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

生成以下 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.

表单提交时收到的结果参数是：

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"}}

这比这篇文章的第一个版本要好得多。但是我怎样才能把它变成原始数据呢？

【问题讨论】：

如果我把表格存储在字符串中并使用纯js给出表格可以吗？？
这是一个有趣的选项。这可以在提交时完成，然后再将数据发送回控制器吗？

标签： javascript ruby-on-rails json

【解决方案1】：

const TimeTable=function(str) {
    var results;
    days=0;
    const figureToControl=(h)=> {
        var g='';
        if ( !Number.isNaN(+h)===true) {
            Number(h);
            for(h > 0; h--; ) {
                g+='<th></th>';
            }
        }
        else {
            g=`<th>${h}</th>`;
        }
        return g
    }
    const operate=(a, c)=> {
        days++;
        results=a.push(`<tr>${c.split(',').reduce((g, h)=>(g.push(figureToControl(h)), g), []).join('')}</tr>`) 
        return results
    }
    var tableText = '';
    tableText+=str.split('/').reduce((a, c)=> (operate(a, c), a), []).join('');
    return tableText+"</table>";
}
console.log(TimeTable("1,9F,6/8/10E,9D,2,9E,10E,2/2,9F,2,9S,2/8/10E,9D,9E,2,9S,2"));

我们开始吧让我解释一下如何输入字符串如果您使用/，它将在<tr> 中变形，因此1,9F,3/4 将是<tr><th></th><th>9F</th><th></th><th></th><th></th><tr><tr><th></th><th></th><th></th><th></th></tr>

如果您使用,，它将在<th> 中变形，因此1,9F,3 将是<th></th><th>9F</th><th></th><th></th><th></th>

现在数字意味着会有一个空的<th> 所以3 将是<th></th><th></th><th></th>

这非常可靠，它返回一个字符串而不是一个 html 元素，你可以使用它来导入它 elment.innerHTMl = tablestring 和我它也适用于空格如果我没有写你想要的 json 字符串不要担心，但你可以随时更改我的代码

【讨论】：