Convert a HTML table data into a JSON object in jQuery by ignoring particular column

Question

Convert an HTML table of values into a JSON object to be manipulated with jQuery by ignoring Particular column value

For example: I have a table,

fstname lastName    Age
john    gobby   8
Adams   mekander    10
jimmy   Rumpel  11

And I need the json result as I mentioned below,

My code is as follows,

$(document).ready(function () {
            $("#ConvertJsonButton").click(function () {
                var myRows = [];
                var headers = [];
$("#tablesort tr#datajson").each(function(index) {
    if (index === 0) {
                //for headers
                   $cells = $(this).find("td.cellClass");
                    headers[index] = {};                 
    $cells.each(function (cellIndex) {                                  
    headers[cellIndex] = $(this).text();                                                    
                 });
    }               
    else {                      
                $cells = $(this).find("td.cellClass");
        myRows[index] = {};
    $cells.each(function (cellIndex) {                                                  
        myRows[index][headers[cellIndex]] = $(this).text();
            });                     
                    }
    });             
        var myObj = {};
        myObj.myrows = myRows;              
        alert(JSON.stringify(myObj));               
            });
        });

I want this result:

{
  "john": {
    "lastName": "gobby",
    "Age": "8"
  },
  "Adams": {
    "lastName": "Mekander",
    "Age": "10"
  },
  "jimmy": {
    "lastName": "Rumpel",
    "Age": "11" 
  },
}

Easy way would be creating objects array which is last name and age and assign each object of array to firstName — Manjunath, May 01 '19 at 05:14
Your question is unclear. Are you trying to ignore a particular column, or are you actually trying to ignore a row where a particular column holds a certain value? — Tibrogargan, May 01 '19 at 05:20
No, actually I am trying to ignore the particular column firstName- @Tibrogargan — priya, May 01 '19 at 05:26
Quick question: what happens if two people have the same first name? — Yaakov Ainspan, May 01 '19 at 05:28
Because I ran a quick test case in [this fiddle](https://jsfiddle.net/bnmu5xz4/) and it seems to be one... — Yaakov Ainspan, May 01 '19 at 05:30
Just enter the info into the boxes and hit convert... if two of them have the same first name it will overwrite the older one. — Yaakov Ainspan, May 01 '19 at 05:30
Possible duplicate of [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) — Zainul Abideen, May 01 '19 at 05:58

score 1 · Accepted Answer · edited Sep 21 '20 at 18:01

Use jquery.tabletojson.min.js

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/table-to-json@1.0.0/lib/jquery.tabletojson.min.js" integrity="sha256-H8xrCe0tZFi/C2CgxkmiGksqVaxhW0PFcUKZJZo1yNU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  $('#run').click( function() {
    var table = $('#example-table').tableToJSON();
    var data = {};
    $.each(table, function(key, value) {
        var jsonKey = value.firstname;
        var map = {};
        map = value;
        map.firstname = undefined;
        data[jsonKey] = map;
    }); 
    alert(JSON.stringify(data));
    console.log(JSON.stringify(data));
});
});
</script>
</head>
<body>

<table id="example-table" class="table table-striped" border="1">
   <thead>
      <tr>
         <th>firstname</th>
         <th>lastname</th>
         <th>age</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>john</td>
         <td>goby</td>
         <td>8</td>
      </tr>
      <tr>
         <td>Adams</td>
         <td>mekander</td>
         <td>10</td>
      </tr>
      <tr>
         <td>jimmy</td>
         <td>Rumpel</td>
         <td>11</td>
      </tr>
   </tbody>
</table>
<button id="run" class="btn btn-primary">Convert!</button>

</body>
</html>

var jsonKey = value.firstname; map.firstname = undefined; can you please explain these lines — priya, May 01 '19 at 07:06
@priya Setting any key value to `undefined` will remove that key from object. — Sudhir Ojha, May 01 '19 at 07:18
Thankyou, Sudhir. your code worked for me....And I have an general doubt that, can i undefined a entire column in a table?? — priya, May 01 '19 at 07:54

Convert a HTML table data into a JSON object in jQuery by ignoring particular column

1 Answers1