将HTML表格转换为JSON

Question

将HTML表格转换为JSON

8

我创建了一个示例应用程序，可以将HTML表格转换为JSON。问题在于JSON没有重复的值，而且我还想从JSON中删除最后两列。

下面是生成的JSON：

[
   {
      "Person Name":"Smith",
      "Score":"disqualified",
      "Price":"150",
      "Tax":"41"
   },
   {
      "Person Name":"Jackson",
      "Score":"94",
      "Price":"250",
      "Tax":"81"
   },
   {
      "Person Name":"Doe",
      "Score":"80",
      "Price":"950",
      "Tax":"412"
   },
   {
      "Person Name":"Johnson",
      "Score":"67",
      "Price":"750",
      "Tax":"941"
   }
]

但是我期望的JSON格式应该像这样：

[
   {
      "Person Name":"Jill",
      "Person Name":"Smith",
      "Score":"disqualified"
   },
   {
      "Person Name":"Eve",
      "Person Name":"Smith",
      "Score":"94"
   },
   {
      "Person Name":"John",
      "Person Name":"Smith",
      "Score":"80"
   },
   {
      "Person Name":"Adam",
      "Person Name":"Smith",
      "Score":"67"
   }
]

请问有谁能告诉我如何从表格中生成上述JSON？

我的代码如下。

HTML代码：

<table id='example-table'>
    <thead>
    <tr>
        <th>Person Name</th>
        <th>Person Name</th>
        <th data-override="Score">Points</th>
        <th>Price</th>
        <th>Tax</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td data-override="disqualified">50</td>
        <td>150</td>
        <td>41</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>250</td>
        <td>81</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>950</td>
        <td>412</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
        <td>750</td>
        <td>941</td>
    </tr>
    </tbody>
</table>
<button id="convert-table" >Convert!</button>

Javascript 代码

$('#convert-table').click( function() {
  var table = $('#example-table').tableToJSON();
  console.log(table);
  alert(JSON.stringify(table));  
});

DEMO (JSFiddle)

- Alex Man

有一个名为 Person Name 的键出现了两次。"对象中的名称应该是唯一的。" - alexP

像这样吗？http://jsfiddle.net/robertrozas/xAh4T/ - Hackerman

@RobertRozas，你的删除最后两列代码很好用。 - Alex Man

还是这个？http://jsfiddle.net/robertrozas/cCzqn/82/ - Hackerman

@RobertRozas 不，两个都应该是人名。 - Alex Man

显示剩余5条评论

5个回答

4

您不能有重复的键，但可以使用名称数组。例如：

{
  "PersonNames":["John","Smith"],
  "Score":"80"
},

- Per Quested Aronsson

1

使用“ignoreColumns”选项来删除最后两个字段

var table = $('#example-table').tableToJSON({
    ignoreColumns:[2,3]
});

并使标题唯一。

<th>Person Name</th>
<th>Person SurName</th>

- Volkan Ulukut

谢谢……这个可以删除最后两列……但是如何生成具有不同值的重复键（人名）的JSON呢？ - Alex Man

我认为这个模块不是用来做那个的。如果你能找到允许它的另一个模块，你需要使用它。 - Volkan Ulukut

tableToJSON是一个jQuery模块。不管怎样，你为什么这么需要重复的列名呢？也许可以通过其他方式来解除这个限制？ - Volkan Ulukut

1

试试这个：

$('#convert-table').click( function() {
var table = $('#example-table').tableToJSON({
    ignoreColumns:[3,4]}
);
 console.log(table);
 alert(JSON.stringify(table));  
});

Jsfiddle：http://jsfiddle.net/robertrozas/9VX6Z/

（含义：这是一个关于编程的网站，链接为http://jsfiddle.net/robertrozas/9VX6Z/）

- Hackerman

它不应该是名字和姓氏，而应该是人名。 - Alex Man

0

从一种方式开始格式化HTML数据。

$("#del_player").on("click", function() {
    var row_to_del = $("#table_player tbody tr[active=true]");
    var arr = [];

    $.each(row_to_del, function(key, val){
        arr.push(val.outerText.split('\t'));
    });
    console.log(JSON.stringify(arr));
})

- CallMarl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raphaël Althaus · Accepted Answer

这样做可能可行（并不是很好看，但是）

解释：

您可以使用 ignoreColumns 来避免获取第3列和第4列。

您可以使用 headings 来更改“标题”（json文件中的键）。但是，这也将获取包含 TH 的第一行。

因此，我们必须在构建 json 数组后删除那一行。

$('#convert-table').click( function() {
    var $table = $('#example-table');

    var table = $table.tableToJSON(
                      {
                         ignoreColumns:[3, 4], 
                         headings: ['FirstName', 'LastName', 'Score']
                       });
    var newTable = $.map(table, function(e){
        return (e.FirstName == "Person Name") ? null : e;
    });
    console.log(newTable);
    alert(JSON.stringify(newTable));  
});

请查看jsfiddle。

编辑

如果人名列的数量是动态的，您可以尝试像这样的操作（假设您从不想要最后两行）。

function convertToTable(el, numberOfColumns, columnNames) {
    var columnsToIgnore = [numberOfColumns-2, numberOfColumns-1];
    var table = el.tableToJSON(
        {
            ignoreColumns:columnsToIgnore, 
            headings: columnNames
        });
    var result = $.map(table, function(e){
        return (e['Person Name0'] == "Person Name") ? null : e;
    });
    alert(JSON.stringify(result));
}

$('#convert-table').click( function() {
    var $table = $('#example-table');
    var columns = $table.find('th');
    var numberOfColumns = columns.length;    
    var columnNames = columns.map(function(index) {
        var text = $(this).text();
        return text == 'Person Name' ? text + index : text;
    }).get();

  convertToTable($table, numberOfColumns, columnNames); 
});

请查看JsFiddle