Reputation: 4886

Converting Html Table to JSON

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)

Upvotes: 8

Answers (5)

CallMarl

Reputation: 593

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

Upvotes: 0

Per Quested Aronsson

Reputation: 12100

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

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

Upvotes: 4

Raphaël Althaus

Reputation: 60493

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

Upvotes: 11

Hackerman

Reputation: 12305

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/

Upvotes: 1

Volkan Ulukut

Reputation: 4218

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>

Upvotes: 1

Converting Html Table to JSON

Answers (5)

Related Questions