22

How to make the following table into a JSON string in jquery/javascript?

<table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>A1</td> <td>A2</td> <td>A3</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> </tbody> </table>

I want to make it such that I can get a JSON string in a variable "myjson" that could be used in a POST request or GET request:

{ "myrows" : [ { "Column 1" : "A1", "Column 2" : "A2", "Column 3" : "A3" }, { "Column 1" : "B1", "Column 2" : "B2", "Column 3" : "B3" }, { "Column 1" : "C1", "Column 2" : "C2", "Column 3" : "C3" } ] }

What is the best way to accomplish this? (Note: There may be a varying number of rows, I just want to extract the text while ignoring the other tags inside of the table)

Improve this question
6
  • can you give us some html so it will be easy to write the jquery to match it! Commented Mar 29, 2012 at 14:12
  • How is jQuery connecting to your database? (This would not be impossible, but would be unlikely.) Commented Mar 29, 2012 at 14:13
  • he does say POST and GET requests which would make this an obvious ajax connection (php or aspx) Commented Mar 29, 2012 at 14:15
  • Your JSON is not valid - did you mean to make myrows an array of arrays? Actually, most of the formatting is not correct. Commented Mar 29, 2012 at 14:15
  • 1
    @dontGoPlastic Corrected post. Commented Mar 29, 2012 at 14:16

7 Answers 7

Reset to default
29

Update: There's a slightly improved fork of the solution (below) on jsFiddle.

You just need to walk the DOM of your table reading it out... this is not even close to optimized but will give you the result you want. (jsFiddle)

// Loop through grabbing everything var myRows = []; var $headers = $("th"); var $rows = $("tbody tr").each(function(index) { $cells = $(this).find("td"); myRows[index] = {}; $cells.each(function(cellIndex) { myRows[index][$($headers[cellIndex]).html()] = $(this).html(); }); }); // Let's put this in the object like you want and convert to JSON (Note: jQuery will also do this for you on the Ajax request) var myObj = {}; myObj.myrows = myRows; alert(JSON.stringify(myObj));​

And the output...

{"myrows":[{"Column 1":"A1","Column 2":"A2","Column 3":"A3"},{"Column 1":"B1","Column 2":"B2","Column 3":"B3"},{"Column 1":"C1","Column 2":"C2","Column 3":"C3"}]}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The only "problem" here is that you get the header value on every row. You could have cached it.
Yeah, that's one of the reasons why I mentioned that it's not optimized. I'll modify it a bit for that.
11

Here is a solution without jQuery, inspired by this article:

function tableToJson(table) { const data = []; for (let i = 1; i < table.rows.length; i++) { const tableRow = table.rows[i]; const rowData = []; for (let j = 0; j < tableRow.cells.length; j++) { rowData.push(tableRow.cells[j].innerHTML); } data.push(rowData); } return data; }
Improve this answer

Comments

7

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:

http://jsfiddle.net/nyg4z/27/

Improve this answer

Comments

4

My version of it:

var $table = $("table"), rows = [], header = []; $table.find("thead th").each(function () { header.push($(this).html()); }); $table.find("tbody tr").each(function () { var row = {}; $(this).find("td").each(function (i) { var key = header[i], value = $(this).html(); row[key] = value; }); rows.push(row); });

See the Fiddle.

Improve this answer

1 Comment

Thanks!!! It helped me a lot cause you parted from $table, which in my case was necessary as I am parsing a string of html generated by wordpress ( don't ask me why ¬¬ )
2

Try this.

var myRows = { myRows: [] }; var $th = $('table th'); $('table tbody tr').each(function(i, tr){ var obj = {}, $tds = $(tr).find('td'); $th.each(function(index, th){ obj[$(th).text()] = $tds.eq(index).text(); }); myRows.myRows.push(obj); }); alert(JSON.stringify(myRows));

Working demo - http://jsfiddle.net/u7nKF/1/

Improve this answer

Comments

2 
var _table = document.getElementById("table"); var _trLength = _table.getElementsByTagName("tr").length; var _jsonData = []; var _obj = {}; var _htmlToJSON = function(index){ var _tr = _table.getElementsByTagName("tr")[index]; var _td = _tr.getElementsByTagName("td"); var _arr = [].map.call( _td, function( td ) { return td.innerHTML; }).join( ',' ); var _data = _arr.split(","); _obj = { column1 : _data[0] ,column2 : _data[1] ,column3 : _data[2] }; _jsonData.push(_obj); }; for(var i = 1; i < _trLength; i++){ _htmlToJSON(i); } console.log("html to JSON",_jsonData);
Improve this answer

2 Comments

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.
Sorry sir newbie here:(
0

Here you go http://jsfiddle.net/Ka89Q/4/

var head = [], i = 0, tableObj = {myrows: []}; $.each($("#my_table thead th"), function() { head[i++] = $(this).text(); }); $.each($("#my_table tbody tr"), function() { var $row = $(this), rowObj = {}; i = 0; $.each($("td", $row), function() { var $col = $(this); rowObj[head[i]] = $col.text(); i++; }) tableObj.myrows.push(rowObj); }); alert(JSON.stringify(tableObj));
Improve this answer

1 Comment

Thanks @Michael. One issue I noticed in trying to extend this to suit my purposes is that if you use th cells in your tbody to highlight key data in each row it fails over. Not a major issue but worthy of note maybe? Otherwise thanks - works lovely on 80+ rows.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.