convert a html table with select to Json
Question
I have difficulties to properly export to a JSON table the content of a html table when it contains a select tag. I need the selected option value to be exported, not the full content of the select inputbox (ex: "Animal":"Dog\n Cat\n Hamster\n Parrot\n Spider\n Goldfish" should be "Animal":"Cat")
The html code I use is:
<html>
<body>
<table id="students" border="1">
<thead>
<tr>
<th>Name</th>
<th> Animal </th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oscar</td>
<td> <select name="pets" id="pet-select">
<option value="dog">Dog</option>
<option value="cat" selected>Cat</option>
<option value="hamster">Hamster</option>
</select>
</td>
<td>23</td>
<td>16.5</td>
</tr>
<tr>
<td>Antonio</td>
<td> <select name="pets" id="pet-select">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster" selected>Hamster</option>
</select>
</td>
<td>32</td>
<td>14</td>
</tr>
<tr>
<td>Jessica</td>
<td> <select name="pets" id="pet-select">
<option value="dog" selected >Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
</select>
</td>
<td>21</td>
<td>19</td>
</tr>
</tbody>
</table>
<br>
<button id="run">Convert!</button>
</body>
</html>
and the JS:
/*! tabletojson - v0.11.1 - Daniel White */ ! function(a) {
"use strict";
a.fn.tableToJSON = function(b) {
var c = {
ignoreColumns: [],
onlyColumns: null,
ignoreHiddenRows: !0,
ignoreEmptyRows: !1,
headings: null,
allowHTML: !1,
includeRowId: !1,
textDataOverride: "data-override",
textExtractor: null
};
b = a.extend(c, b);
var d = function(a) {
return void 0 !== a && null !== a
},
e = function(c) {
return d(b.onlyColumns) ? -1 === a.inArray(c, b.onlyColumns) : -1 !== a.inArray(c, b.ignoreColumns)
},
f = function(b, c) {
var e = {},
f = 0;
return a.each(c, function(a, c) {
f < b.length && d(c) && (e[b[f]] = c, f++)
}), e
},
g = function(c, d, e) {
var f = a(d),
g = b.textExtractor,
h = f.attr(b.textDataOverride);
return null === g || e ? a.trim(h || (b.allowHTML ? f.html() : d.textContent || f.text()) || "") : a.isFunction(g) ? a.trim(h || g(c, f)) : "object" == typeof g && a.isFunction(g[c]) ? a.trim(h || g[c](c, f)) : a.trim(h || (b.allowHTML ? f.html() : d.textContent || f.text()) || "")
},
h = function(c, d) {
var e = [],
f = b.includeRowId,
h = "boolean" == typeof f ? f : "string" == typeof f ? !0 : !1,
i = "string" == typeof f == !0 ? f : "rowId";
return h && "undefined" == typeof a(c).attr("id") && e.push(i), a(c).children("td,th").each(function(a, b) {
e.push(g(a, b, d))
}), e
},
i = function(a) {
var c = a.find("tr:first").first();
return d(b.headings) ? b.headings : h(c, !0)
},
j = function(c, h) {
var i, j, k, l, m, n, o, p = [],
q = 0,
r = [];
return c.children("tbody,*").children("tr").each(function(c, e) {
if (c > 0 || d(b.headings)) {
var f = b.includeRowId,
h = "boolean" == typeof f ? f : "string" == typeof f ? !0 : !1;
n = a(e);
var r = n.find("td").length === n.find("td:empty").length ? !0 : !1;
!n.is(":visible") && b.ignoreHiddenRows || r && b.ignoreEmptyRows || n.data("ignore") && "false" !== n.data("ignore") || (q = 0, p[c] || (p[c] = []), h && (q += 1, "undefined" != typeof n.attr("id") ? p[c].push(n.attr("id")) : p[c].push("")), n.children().each(function() {
for (o = a(this); p[c][q];) q++;
if (o.filter("[rowspan]").length)
for (k = parseInt(o.attr("rowspan"), 10) - 1, m = g(q, o), i = 1; k >= i; i++) p[c + i] || (p[c + i] = []), p[c + i][q] = m;
if (o.filter("[colspan]").length)
for (k = parseInt(o.attr("colspan"), 10) - 1, m = g(q, o), i = 1; k >= i; i++)
if (o.filter("[rowspan]").length)
for (l = parseInt(o.attr("rowspan"), 10), j = 0; l > j; j++) p[c + j][q + i] = m;
else p[c][q + i] = m;
m = p[c][q] || g(q, o), d(m) && (p[c][q] = m), q++
}))
}
}), a.each(p, function(c, g) {
if (d(g)) {
var i = d(b.onlyColumns) || b.ignoreColumns.length ? a.grep(g, function(a, b) {
return !e(b)
}) : g,
j = d(b.headings) ? h : a.grep(h, function(a, b) {
return !e(b)
});
m = f(j, i), r[r.length] = m
}
}), r
},
k = i(this);
return j(this, k)
}
}(jQuery);
// Code goes here
$('#run').click(function() {
var table = $('#students').tableToJSON({
extractor: function($index, $cell) {
return {
name: $cell.find('td').value
};
}
});
alert(JSON.stringify(table));
});
you can check the result in the following codepen
2 answers
solution1
1 ACCPTED 2021-05-31 11:32:08
One way is use the index in the extractor. When index is one return the value of the select, otherwise return the cell text
$('#run').click(function() { var table = $('#students').tableToJSON({ extractor: function($index, $cell) { if ($index == 1) { return $cell.find('select').val() } return $cell.text() } }); console.log(JSON.stringify(table)); });
<script src="https://cdnjs.cloudflare.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> <table id="students" border="1"> <thead> <tr> <th>Name</th> <th> Animal </th> <th>Age</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Oscar</td> <td> <select name="pets" id="pet-select"> <option value="dog">Dog</option> <option value="cat" selected>Cat</option> <option value="hamster">Hamster</option> </select> </td> <td>23</td> <td>16.5</td> </tr> <tr> <td>Antonio</td> <td> <select name="pets" id="pet-select"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster" selected>Hamster</option> </select> </td> <td>32</td> <td>14</td> </tr> <tr> <td>Jessica</td> <td> <select name="pets" id="pet-select"> <option value="dog" selected>Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> </select> </td> <td>21</td> <td>19</td> </tr> </tbody> </table> <br> <button id="run">Convert!</button>
solution2
0 2021-05-31 18:03:52
I think your issue is that for a <select> , you need to get the selected option . Otherwise it will return all option values as you've described. Unless you absolutely need to use .tableToJSON() , which looks like alot of obfuscated overhead, I simplified the code into something a little more easier to follow. Also this is more flexible than the current accepted answer in that you could move the select to another column and it will still work.
$('#run').on('click', function() { let items = $('thead th').get().map(th => th.textContent.trim()), json = []; $('tbody tr').each(function(row, tr) { json[row] = {}; $(tr).find('td').each(function(index, td) { json[row][items[index]] = td.firstElementChild? td.firstElementChild.selectedOptions[0].value: td.textContent; }); }); console.log(JSON.stringify(json)); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <table id="students" border="1"> <thead> <tr> <th>Name</th> <th> Animal </th> <th>Age</th> <th>Grade</th> </tr> </thead> <tbody> <tr> <td>Oscar</td> <td> <select name="pets" id="pet-select"> <option value="dog">Dog</option> <option value="cat" selected>Cat</option> <option value="hamster">Hamster</option> </select> </td> <td>23</td> <td>16.5</td> </tr> <tr> <td>Antonio</td> <td> <select name="pets" id="pet-select"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster" selected>Hamster</option> </select> </td> <td>32</td> <td>14</td> </tr> <tr> <td>Jessica</td> <td> <select name="pets" id="pet-select"> <option value="dog" selected >Dog</option> <option value="cat">Cat</option> <option value="hamster">Hamster</option> </select> </td> <td>21</td> <td>19</td> </tr> </tbody> </table> <br> <button id="run">Convert!</button> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML - Convert json to table
Convert HTML Table to Json
Convert JSON to HTML Table
Convert table HTML to JSON
How to convert HTML table with select and input to json and back again
How to convert json to html table
Convert JSON data to HTML table
Convert json output to HTML table
Convert HTML Table to Json file
Convert a table HTML String to JSON
Related Tags