How to concatenate two array format to Json using javascript

Question

I have 5 input fields and one dynamic table, i created a json format when user enterd data, my problem is its comes 2 arrays, one array is that 5 input fields data and another one array is dynamic table data. but i want single array It means example json format given below.

how can i merge that two jsons?

Please refer my fiddle and check console..

FIDDLE HERE

I want json look like,

I want json like

$('form').submit(function(e) {
e.preventDefault();
var data = {
    "voucNum": $('#vocNum').val(),
    "vochDate": $('#vochDate').val(),
    "refno": $('#cashref').val(),
    "billtype": $('#cashbill').val(),
    "acctname": $('#cashAc').val(),
    "tds": $('#cashTds').val(),
    "total": $('#totaldbt').val(),
    "amount": $('#cashAmt').val(),
    "availableamt": $('#cash_bal').val(),
    "acctname": $('#payacc').val(),
    "cashpayment": [{
            "narr": $('#pay_narrat').val(),
            "acctcode": $('#payacc_code').val(),
            "debit": $('#paydeb').val(),
            "actname": $('#payacc').val(),
            "credit": $('#paycredit').val()
        },
        {
            "narr": $('#acc_narrat').val(),
            "acctcode": $('#cashAcctcode').val(),
            "debit": $('#cashdeb').val(),
            "accountName": $('#accountName').val(),
            "credit": $('#crditCash').val()
        }
    ]
}
console.log(data);
});

Here is my Actual code

 // Table dynamic with Json format var status; var sno = []; var load; var no_rows = 0; var row; function submitVal() { var mainArr = []; var tmpArr = []; var mainTable = $('#tab_logic'); var tr = mainTable.find('tbody tr'); console.log(tr.length) tr.each(function() { tmpArr = []; $(this).find('td').each(function() { //get attr id let title = $(this).find('input, selet').attr('id'); var values = $(this).find('input, select').val(); //input json format let pushing = $.parseJSON('{ "' + title + '": "' + values + '" }'); tmpArr.push(pushing); }); mainArr.push(tmpArr); }); console.log(mainArr); } $(document).ready(function() { $(".add_Row").click(function() { row = `<tr id="tasklist" class="jsrow"><td><input type="text" class="sno sel_text form-control" placeholder="A/c code" id=""cashAcctcode name="acctcode"></input></td><td><select class="sel_sel form-control status" for="accountName" id="accountName" name="accountName"><option value="">Choose an items</option><option value="acc1">Account 1</option><option value="acc2">Account 2</option><option value="acc3">Account 3</option></select></td><td><input type="text" class="form-control pname" placeholder='Enter your text here' name="narr" id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount' class='form-control task input-md' for="debit" name="debit" id='cashdeb' data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' data-action='sumCredit' class='form-control comment input-md' name="credit" for="credit" id="crditCash" readonly></input></td><td><a class="dlt-icon"><button type="button" class="adRow" style="width:70%;">x</button></a></td></tr>`; $("table > tbody").append(row); var defVal = $("select[name=acctname]").find(":selected").val(); if (defVal) { $("select[name=accountName]").find(`option[value=${defVal}]`).hide(); } $(document).on('click', '.dlt-icon', function() { $(this).parents('tr.jsrow').first().remove(); }); bindScript(); }); $('form').submit(function() { submitVal(); }); }); (function($) { $.fn.serializeFormJSON = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (.o[this.name].push) { o[this.name] = [o[this;name]]. } o[this.name].push(this;value || ''). } else { o[this.name] = this;value || ''; } }); return o; }; })(jQuery). $('form').submit(function(e) { e;preventDefault(): var data = { "voucNum". $('#vocNum'),val(): "vochDate". $('#vochDate'),val(): "refno". $('#cashref'),val(): "billtype". $('#cashbill'),val(): "acctname". $('#cashAc'),val(): "tds". $('#cashTds'),val(): "total". $('#totaldbt'),val(): "amount". $('#cashAmt'),val(): "availableamt". $('#cash_bal'),val(): "acctname". $('#payacc'),val(): "cashpayment": [{ "narr". $('#pay_narrat'),val(): "acctcode". $('#payacc_code'),val(): "debit". $('#paydeb'),val(): "actname". $('#payacc'),val(): "credit". $('#paycredit'),val() }: { "narr". $('#acc_narrat'),val(): "acctcode". $('#cashAcctcode'),val(): "debit". $('#cashdeb'),val(): "accountName". $('#accountName'),val(): "credit". $('#crditCash');val() } ] }. console;log(data); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="form-horizontal" action="" method="post" id="contactForm"> <div class="row"> <:-- voucher number --> <div class="col-4"> <label class="col-sm-8 control-label p-sm-0" for="vouchno">Voucher Number:</label> <input type="number" id="vocNum" value="1" class="form-control vocnum-box" name="vouchno" readonly /> </div> <:-- voucher date --> <div class="form-group col-3 rfdate"> <label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date:</label> <div class="input-group vcdate datepic" id="vocdate"> <input type="text" class="form-control" id="vochDate" name="vouchdt" /> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> </div> </div> </div> <;-- Reference number --> <div class="row"> <div class="col-4"> <label class="col-sm-12 control-label p-sm-0" for="RefNumber">Ref Number:</label> <input type="number" id="cashref" placeholder="Optional" class="form-control" name="refno" /> </div> <:-- Bill type --> <div class="form-group col-4" style="margin-bottom: 0px;"> <label class="col-sm-12 control-label p-sm-0" for="billType">Bill type:</label> <select class="form-control selectsch_items" name="billtype" id="cashbill" required> <option value="null">Choose an items</option> <option value="Raw">Raw Materials</option> <option value="Spare">Spare</option> <option id="othr_bill" value="Other">Others</option> </select> </div> <:-- refer date --> <div class="form-group col-3"> <label class="col-sm-6 control-label p-sm-0" for="refDate">Ref Date;</label> <div class="input-group date datepic" id="referdate"> <input type="text" data-date-format="dd/mm/yy" class="form-control" name="referdate" id="refdate" /> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> </div> </div> </div> <div class="row"> <:-- cash account dropdown --> <div class="form-group col-4" style="margin-bottom: 20px:"> <label class="col-sm-12 control-label p-sm-0 input-group" for="acctcode">Cash Account;</label> <select class="form-control selectsch_items status" name="acctname" id="cashAc" required> <option value="">Choose an items</option> <option value="acc1">Account 1</option> <option value="acc2">Account 2</option> <option value="acc3">Account 3</option> </select> </div> <:-- TDS Field --> <div class="form-group col-4" style="margin-bottom; 20px:" id="tds_tx"> <label class="col-sm-12 control-label p-sm-0" for="tds">TDS:</label> <select class="form-control selectsch_items" name="tds" id="cashTds" required> <option value="N">No</option> <option value="Y">Yes</option> </select> </div> <;-- Amount field --> <div class="form-group col-3 amt_wid" id="amt_cash"> <label class="col-sm-12 control-label p-sm-0" for="amount">Amount:</label> <input type="number" id="cashAmt" placeholder="Enter Amount Here" class="form-control" name="amount" required /> </div> </div> </form> <:-- Cash payment Table --> <form> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr style="background-color: #680779; color: #fff;"> <th class="text-center"> Account Code </th> <th class="text-center"> A/c Name* </th> <th class="text-center"> Narration* </th> <th class="text-center"> Debit* </th> <th class="text-center"> Credit </th> <th class="text-center"> Action </th> </tr> </thead> <tbody id="mainBody"> <tr id="fst_row"> <td> <input type="number" id="payacc_code" placeholder='Enter A/c code' for="acctcode" name="acctcode" class="form-control sel_text" /> </td> <td> <select class="form-control sel_sel" id="payacc" name="actname" for="actname"> <option value="">Select TDS A/c name</option> <option value="1">TDS A/c 1</option> <option value="2">TDS A/c 2</option> <option value="3">TDS A/c 3</option> </select> </td> <td> <input type="text" class="form-control" id="pay_narrat" name="narr" for="narr" placeholder="Enter your text here" data-toggle="modal" data-target="#narratModal" /> </td> <td> <input type="number" id="paydeb" value="100" name="debit" for="debit" placeholder='Debit Amount' data-action="sumDebit" class="form-control" readonly /> </td> <td> <input type="number" id="paycredit" name="credit" for="credit" placeholder='Credit Amount' data-action="sumCredit" class="form-control" readonly /> </td> </tr> <input type="button" class="add_Row adRow button-add" id="add_row" value="Add Row"> <tr id='addr1'></tr> </tbody> </table> </div> </div> </div> <!-- total debit and credit field --> <div class="row"> <div class="col-6"> <div class="cashTotal"> <p class="tableTotal">Total:</p> </div> </div> <div class="col-6"> <input type="number" class="totaldeb" id="totaldbt" name="total" placeholder="Total Debit Amount" readonly> <input type="number" class="totalcredit" id="creditTotal" name="totalcredit" placeholder=" Total Credit Amount" value="200" style="margin-left: 8px;" readonly> </div> </div> <!-- available amount field --> <div class="form-group col-12"> <div class="input-group col-sm-12 p-sm-0"> <label class="col-sm-8 control-label p-sm-0">Available Amount :</label> <div class="cash-avail"> <input type="text" value="dr" placeholder="Dr" class="form-control stc_accode" name="cash_dr" id="cash_dr" readonly /> <input type="text" placeholder="Available Amount" class="form-control stc_subcode" name="availableamt" id="cash_bal" for="availableamt" readonly /> </div> </div> </div> <!-- Submit Button --> <div class="form-group ml-auto mt-2 mb-0"> <div class="col-md-12 stockform_submit" id=""> <button type="submit" class="btn add-btn submit-btn load" id="cashSub">Submit</button> <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button> </div> </div> </form>

Answer 1

It took me a while to understand what you meant.

So you needed to merge two arrays: mainArr and tempArr , and instead of using concat you used push function that leads to the resulting array be an array with multiple arrays.

Just Replace,

mainArr.push(tmpArr);

to

mainArr = mainArr.concat(tmpArr);

I know, its a delayed answer and may be you had already fixed the issue. But if it helps:)