如何在单个对象中并排获得表格行？

Question

I have table side by side when i enter data in table and save it returns data of first table like

[{"circuit_no_left":"1","rating_left":"3","description_left":"test1","circuit_no_right":"2","rating_right":"5","description_right":"test2"},{"circuit_no_left":"3","rating_left":"","description_left":"","circuit_no_right":"4","rating_right":"","description_right":""},{"circuit_no_left":"5","rating_left":"","description_left":"","circuit_no_right":"6","rating_right":"","description_right":""},{"circuit_no_left":"7","rating_left":"","description_left":"","circuit_no_right":"8","rating_right":"","description_right":""}]

I want output like this

[{"circuit_no_left":"1","rating_left":"3","description_left":"test1"},{"circuit_no_right":"2","rating_right":"5","description_right":"test2"},{"circuit_no_left":"3","rating_left":"","description_left":""},{"circuit_no_right":"4","rating_right":"","description_right":""},{"circuit_no_left":"5","rating_left":"","description_left":""},{"circuit_no_right":"6","rating_right":"","description_right":""},{"circuit_no_left":"7","rating_left":"","description_left":""},{"circuit_no_right":"8","rating_right":"","description_right":""}]

I just want one table row in one object. I'm getting side by side table in one object which is not correct. Column left in one object and column right in other object.

html:

    <div class="table-responsive">
                            <table id="table" class="table table-bordered custom_table">
                                <thead>
                                <tr>
                                    <th style="width: 72px;">Circuit</th>
                                    <th style="width: 72px;">Rating</th>
                                    <th>Description</th>
                                    <th style="width: 72px;">Circuit</th>
                                    <th style="width: 72px;">Rating</th>
                                    <th>Description</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

Script:

  var table = document.getElementById('table');
                var jsonArr = [];
                for (var i = 1, row; row = table.rows[i]; i++) {
                    var col = row.cells;
                    var jsonObj = {
                         circuit_no_left: col[0].innerHTML,
                        rating_left: col[1].innerHTML,
                        description_left: col[2].innerHTML,
                        circuit_no_right: col[3].innerHTML,
                        rating_right: col[4].innerHTML,
                        description_right: col[5].innerHTML,
                    }

                    jsonArr.push(jsonObj);
                }
                this.table_data = JSON.stringify(jsonArr);

                console.log('tableData', this.table_data);

Answer 1

If you want the left and right entries broken into separate objects, just create two objects in the loop and push them into the array separately.

var jsonArr = [];
for (var i = 1, row; row = table.rows[i]; i++) {
    var col = row.cells;
    var jsonObjLeft = {
        circuit_no_left: col[0].innerHTML,
        rating_left: col[1].innerHTML,
        description_left: col[2].innerHTML
    };
    var jsonObjRight = {
        circuit_no_right: col[3].innerHTML,
        rating_right: col[4].innerHTML,
        description_right: col[5].innerHTML
    };

    jsonArr.push(jsonObjLeft);
    jsonArr.push(jsonObjRight);
}
this.table_data = JSON.stringify(jsonArr);

console.log('tableData', this.table_data);