Convert a HTML table data into a JSON object in jQuery

Question

Anyone know how to convert an HTML table of values into a nice JSON object to be manipulated with jQuery?

possible duplicate of Iterate through html table using jQuery, converting the data in the table into JSON — Roger Pate
– Roger Pate, Commented Jun 9, 2010 at 1:03

Pointy · Accepted Answer · 2013-05-02 18:45:46Z

37

An HTML table? Like, all the <td> contents in a 2-d array?

var tbl = $('table#whatever tr').map(function() {
  return $(this).find('td').map(function() {
    return $(this).html();
  }).get();
}).get();

Then just use $.json (or whatever library you want) to turn that into a JSON string.

edit — re-written to use the native (shim here) .map() from the array prototype:

var tbl = $('table#whatever tr').get().map(function(row) {
  return $(row).find('td').get().map(function(cell) {
    return $(cell).html();
  });
});

The jQuery .map() function has the "feature" of flattening returned arrays into the result array. That is, if the callback function returns a value that is itself an array, then instead of that returned array becoming the value of one cell of the .map() result, its elements are each added to the result.

It might work to use the original jQuery version and just wrap an extra array around the returned values.

edited May 2, 2013 at 18:45

answered Feb 10, 2010 at 20:16

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pointy Over a year ago

The joke here may be that this doesn't really work. The jQuery .map() method has the (quite questionable, if you ask me) feature of flattening returned arrays. This basic approach would work however with the native .map() that newer JavaScript environments provide via the Array prototype.

user1482015 Over a year ago

It is very helpful!! BTW @Pointy, what if very TD has a single class in it, eg <TD class='message'>bah bah bah...</TD>, can I convert it to json, so class name became property name like that ==> "message" : "bah bah bah...", thanks a lot

Pointy Over a year ago

@VirtualJasper yes you could certainly do that, but you'd need to construct an object for each cell. I'd ask a new question.

John Rumpel · Accepted Answer · 2013-04-18 23:17:57Z

24

Do you mean the following situation?

Given:

A1 B1 C1 ...
A2 B2 C2 ...
...

Needed:

{"1": ["A1", "B1", "C1", ...], 
 "2": ["A2", "B2", "C2", ...], ...}

So use the following function which creates a valid JSON-String function without trailing ",":

function html2json() {
   var json = '{';
   var otArr = [];
   var tbl2 = $('#dest_table tr').each(function(i) {        
      x = $(this).children();
      var itArr = [];
      x.each(function() {
         itArr.push('"' + $(this).text() + '"');
      });
      otArr.push('"' + i + '": [' + itArr.join(',') + ']');
   })
   json += otArr.join(",") + '}'

   return json;
}

answered Apr 18, 2013 at 23:17

John Rumpel

4,6156 gold badges39 silver badges51 bronze badges

3 Comments

Jimmy Over a year ago

this question is 3 years old and has an accepted answer, lol why are you answering it?

didxga Over a year ago

Well, many people will get into same problem as OP. @John's answer may give additional solution for them

Tugrul Over a year ago

Nice shot, it's amazing.

lightswitch05 · Accepted Answer · 2024-05-30 15:13:30Z

20

I needed the same thing except with the ability to ignore columns, override values, and not be confused by nested tables. I ended up writing a jQuery plugin table-to-json:

https://github.com/lightswitch05/table-to-json

All you have to do is select your table using jQuery and call the plugin:

var table = $('#example-table').tableToJSON();

Here is a demo of it in action:

$('#run').click(function() {
  var table = $('#example-table').tableToJSON();
  console.log('Table:', table);
  alert(JSON.stringify(table, null, 2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/jquery.tabletojson.min.js"></script>

<table id='example-table'>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th data-override="Score">Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td data-override="disqualified">50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
    </tr>
  </tbody>
</table>

<button id="run">Convert!</button>

edited May 30, 2024 at 15:13

answered Feb 25, 2013 at 15:04

lightswitch05

9,4987 gold badges54 silver badges75 bronze badges

6 Comments

OKEEngine Over a year ago

The bad thing is, if there is a html tag within the cell, it will be replaced with empty string.

lightswitch05 Over a year ago

@JerryLiang there is an option allowHTML to preserve HTML tags

Ghanshyam Lakhani Over a year ago

@lightswitch05 in your jsfiddle if table contains dropdown than how to get only selected value in json ...(In my case senario is same as you said also working fine your fiddle but in my table on more column for State(dropdown) than in json all data given for dropdown.plz help me...Thanks)

lightswitch05 Over a year ago

Ghanshyam, don't use this tool to extract form data, use a standard form

lightswitch05 Over a year ago

@Mir I've updated the answer with a functional snippet and removed the broken jsfiddle

|

Collectives™ on Stack Overflow

Convert a HTML table data into a JSON object in jQuery

3 Answers 3

3 Comments

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related