Converting user input from html table to JSON with jQuery

Question

I am able to convert a pre populated table with data to JSON object with jQuery. Here is the code:

var header = $('table thead tr th').map(function () {
return $(this).text();
});

var tableObj = $('table tbody tr').map(function (i) {
    var row = {};
    $(this).find('td').each(function (i) {
        var rowName = header[i];
        row[rowName] = $(this).text();
    });
    return row;
}).get();

JSON.stringify(tableObj);

And the html table is like this:

<table>
        <thead>
        <tr>
            <th>Name</th>
            <th>E-mail</th>
            <th>Job</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>jason</td>
            <td>[email protected]</td>
            <td>Developer</td>
        </tr>
        <tr>
            <td>ted</td>
            <td>[email protected]</td>
            <td>Bear</td>
        </tr>
        </tbody>
</table>

Now my task is to actually handle empty table with user inputs. When user load the page, the table is empty with no value, after the user entered the input and click submit, I want to convert the user input data into JSON object and pass it back to back-end.

I am trying to make it happen by warp the table into a form, and add <input> tag in each <td>, something like this:

<form>
    <table>
        <tbody>
            <tr>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
            </tr>
            <tr>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
                <td><input type="text"/></td>
            </tr>
        </tbody>
    </table>
    <button type="submit">Submit</button>
</form>

I try to use the .submit() method from jQuery to make it work but I am getting syntax errors:

$('form').submit(
var header = $('table thead tr th').map(function () {
return $(this).text();
});

var tableObj = $('table tbody tr').map(function (i) {
    var row = {};
    $(this).find('td').each(function (i) {
        var rowName = header[i];
        row[rowName] = $(this).text();
    });
    return row;
}).get();

JSON.stringify(tableObj);
);

How should I change my code to make it work?

Have you considered using something like DataTables (datatables.net)? Automatically builds tables using a JSON object and allows for a lot more functionality. — jonmrich
– jonmrich, Commented Aug 31, 2015 at 17:33

OPK · Accepted Answer · 2015-08-31 18:19:32Z

1

That's happening bacause there is no text in the td. You need to find the value of the input.

1) You need to get the input in the td

2) You need to get the value of the input

Also try to look at the editable div

Try this:

row[rowName] = $(this).find('input').val();

edited Aug 31, 2015 at 18:19

OPK

4,1806 gold badges40 silver badges70 bronze badges

answered Aug 31, 2015 at 17:35

qzenchik

463 bronze badges

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

1 Comment

Dave Over a year ago

Also he's not correctly defining the submit() handler. Here's a working fiddle: jsfiddle.net/8uhdhge6

Collectives™ on Stack Overflow

Converting user input from html table to JSON with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related