how to get JSON from html table input text value?

Question

JavaScript code give values of json name:value pair I want in header and input

$('#convert-table').click( function() {
    var iptable=$("#example-table").find('input').serializeArray();
    var table = $('#example-table').tableToJSON(); // Convert the table into a javascript object
    console.log(table);
    alert(JSON.stringify(iptable));
  });

                                    <div class="modal-body">
                                        <table border="1" id="example-table">
                                            <tr data-index="">
                                                <th scope="col"> Check Summary</th>
                                                <th scope="col"> Check Time </th>
                                                <th scope="col"> Status </th>
                                                <th scope="col"> Check_Update</th>
                                            </tr>
                                            {{#each prodcheckresult}}
                                            <tr>
                                                <td> {{check_summary}}
                                                    <input type="hidden" name="check_summary" value="{{check_summary}}">
                                                </td>
                                                <td> {{check_time}}
                                                    <input type="hidden" name="check_time" value="{{check_time}}">
                                                </td>
                                                <td> <select class="form-control" name="status">
                                                        <option>RED</option>
                                                        <option>GREEN</option>
                                                        <option>AMBER</option>
                                                    </select> </td>
                                                <td align="center">
                                                    <input type="text" class="form-control" name="check_update"
                                                        placeholder="Text Input">
                                                </td>
                                            </tr>
                                            {{/each}}
                                        </table>
                                        <button class="btn btn-primary" id="convert-table">Convert!</button>
                                    </div>

[{"Check Summary":"check123","Check Time":"11.45","Status":"Red","Check_Update":"check update123"},{{"Check Summary":"check456","Check Time":"11.45","Status":"Amber","Check_Update":"check update456"}]

score 0 · Answer 1 · answered Aug 01 '19 at 08:08

jQuery is a bit complicated in this case, so common DOM solution - is that right ?

In case, you can tick accept under voting buttons.

HTML modified to include your data (hope proper way) and Convert is fired directly w/o button to simplify:

function Convert() {
    var table = document.getElementById("example-table");
    var row, col, row0, res = [];
    for (var i = 0, row; row = table.rows[i]; i++) {
        var rec = !row0?[]:{};
        for (var j = 0, col; col = row.cells[j]; j++) {
            if(!row0) rec.push(col.innerText);
            else {
                var el = col.firstElementChild;
                rec[row0[j]] = el.value;
            }
        }
        if(row0) res.push(rec);
        else row0 = rec;
    }
    console.log(JSON.stringify(res, null, 2));
}
Convert();

<div class="modal-body">
    <table border="1" id="example-table">
        <tr data-index="">
            <th scope="col"> Check Summary</th>
            <th scope="col"> Check Time </th>
            <th scope="col"> Status </th>
            <th scope="col"> Check_Update</th>
        </tr>
        {{#each prodcheckresult}}
        <tr>
            <td> {{check_summary}}
                <input type="hidden" name="check_summary" value="check123">
            </td>
            <td> {{check_time}}
                <input type="hidden" name="check_time" value="11.45">
            </td>
            <td> <select class="form-control" name="status">
                    <option selected>RED</option>
                    <option>GREEN</option>
                    <option>AMBER</option>
                </select> </td>
            <td align="center">
                <input type="text" class="form-control" name="check_update"
                    placeholder="Text Input" value="check update123">
            </td>
        </tr>
        <tr>
            <td> {{check_summary}}
                <input type="hidden" name="check_summary" value="check456">
            </td>
            <td> {{check_time}}
                <input type="hidden" name="check_time" value="11.45">
            </td>
            <td> <select class="form-control" name="status">
                    <option>RED</option>
                    <option>GREEN</option>
                    <option selected>AMBER</option>
                </select> </td>
            <td align="center">
                <input type="text" class="form-control" name="check_update"
                    placeholder="Text Input" value="check update456">
            </td>
        </tr>
        {{/each}}
    </table>
    <button class="btn btn-primary" onclick="Convert()">Convert!</button>
</div>

Nice 1st answer of this question used for iteration https://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript/3065389 — Tom, Aug 01 '19 at 08:14

how to get JSON from html table input text value?

1 Answers1