Converting Html Table to JSON

Question

I've created a sample application which converts html table into JSON. The problem is that the JSON is not having duplicate values also i want to remove the last two columns from the JSON.

My JSON which has been generated is given below

[
   {
      "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"
   }
]

But my expected JSON is like

[
   {
      "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"
   }
]

Can anyone please tell me how to generate the above JSON from the table

My code is as given below.

html code

<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 code

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

DEMO (JSFiddle)

There is a key named `Person Name` twice. ["The names within an object SHOULD be unique."](http://www.ietf.org/rfc/rfc4627.txt) — alexP, Jan 30 '14 at 15:56
to ignore the last two columns : `tableToJSON({ignoreColumns:[3, 4]});` — Raphaël Althaus, Jan 30 '14 at 15:58
@RobertRozas no both Person Names are different....should need duplicate Person Names with different values — Alex Man, Jan 30 '14 at 16:00
@RobertRozas your code code for removing last two columns works fine good — Alex Man, Jan 30 '14 at 16:03
I wrote a open source web page for this here http://tools.fromdev.com/table-to-json-converter.html - the source code is in github here https://github.com/fromdev/tools/blob/master/table-to-json-converter.html — software.wikipedia, Feb 10 '18 at 04:02
Does this answer your question? [Convert a HTML table data into a JSON object in jQuery](https://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery) — Heretic Monkey, Jun 23 '20 at 19:00

Raphaël Althaus · Accepted Answer · 2014-01-30T16:41:27.017

something like that would work (not really nice, but)

Explanation :

You can use ignoreColumns to avoid taking columns 3 and 4.

You can use headings to change the "headers" (keys in the json file). But this will take also the first line (the one with the TH).

So we have to remove that first line after building the json array.

$('#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));  
});

see jsfiddle

EDIT

If the number of columns with Person Name is dynamic, you could do something like that (assuming you never want the two last rows)

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); 
});

see JsFiddle

the problem is that the columns Person Name is dynamic, can be two or more than that — Alex Man, Jan 30 '14 at 16:18
@user3253853 than you'll have to build your own function which will be calling the tableToJSON with the right parameters. — Raphaël Althaus, Jan 30 '14 at 16:19
@user3253853 by the way, could you show some "different cases" which could exist ? — Raphaël Althaus, Jan 30 '14 at 16:20

score 3 · Answer 2 · answered Apr 07 '14 at 09:39

3

You can't have duplicate keys, but you can use an array of names instead. Example:

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

answered Apr 07 '14 at 09:39

Per Quested Aronsson

9,570
8
47
70

score 1 · Answer 3 · answered Jan 30 '14 at 16:00

1

to remove last two fields use "ignoreColumns" option

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

and make headers unique

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

answered Jan 30 '14 at 16:00

Volkan Ulukut

4,113
1
17
35

Thanks ..... this works in removing the last two columns....but how about to generate JSON with duplicate key (Person Names) with different values – Alex Man Jan 30 '14 at 16:02
I don't think this module is intended to do that. You would need to use another module that allows it, if you can find any that does. – Volkan Ulukut Jan 30 '14 at 16:05
tableToJSON is a jquery module. anyway, why do you need to have duplicate column names so badly? maybe this restriction can be lifted by another means? – Volkan Ulukut Jan 30 '14 at 16:10

score 1 · Answer 4 · answered Jan 30 '14 at 16:08

1

Try this:

$('#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/

answered Jan 30 '14 at 16:08

Hackerman

11,746
2
31
41

its not First Name Last Name, it should be Person Name – Alex Man Jan 30 '14 at 16:14

score 0 · Answer 5 · answered Mar 04 '19 at 14:32

From row a way to format html-data.

$("#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));
})

Converting Html Table to JSON

5 Answers5

Linked