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

如何解决如何使用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>

示例JSON数据：

[{"Indice": "1","Type": "ABBREV","Title": "ShortName","Text": "UNDEF"},{"Indice": "2","Type": "ALIAS","Title": "AliasName","Text": "UNKOWN"},{"Indice": "3","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","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","Title":"FemaleName","Text":"UNDEFINED"}}

比这篇文章的第一版要好得多。但是如何将其转换为原始数据？

非常感谢！

解决方法

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,9S,2/8/10E,2"));

我们在这里让我解释一下您如何输入字符串 如果您使用/，它将在<tr>中变形，因此1,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,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字符串，但是您可以随时更改代码

注意：如果这有助于单击刻度线按钮