Question

185

Converting Html Table to JSON

rated 0 times [ 190] [ 5] / answers: 1 / hits: 47776 / 11 Years ago, thu, january 30, 2014, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

haden

Add To Favorites

Follow

Total Points: 638

Total Questions: 95

Total Answers: 99

Location: Burundi

Member since Wed, Nov 25, 2020

4 Years ago

haden questions

1 react-router-dom: ^6.3.0, when I click the action the URI is changing but component is not mounting

Mon, Apr 11, 22, 00:00, 2 Years ago

1 Please change the parent < Route path=/> to < Route path=*>

Thu, Jan 6, 22, 00:00, 2 Years ago

1 vue3 router.push doesn't update the component when url match the same route?

Sun, Jun 27, 21, 00:00, 3 Years ago

1 JEST | Assert a function was called inside addEventListener callback

Fri, Dec 25, 20, 00:00, 4 Years ago

1 React navigation 5 really slow and dropping JS FPS on Expo

Sun, Dec 20, 20, 00:00, 4 Years ago

View All

answered 11 Years ago aidanl · Accepted Answer

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