Skip to content Skip to sidebar Skip to footer

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 t

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

functionconvertToTable(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

Solution 2:

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

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

Solution 3:

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>

Solution 4:

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/

Solution 5:

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

Post a Comment for "Converting Html Table To Json"