javascript - 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)

Answer 1

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