Как объединить два формата массива в Json, используя JavaScript

Question

У меня есть 5 полей ввода и одна динамическая таблица, я создал формат json, когда пользователь вводил данные, моя проблема в том, что он имеет 2 массива, один массив состоит из 5 данных входных полей, а другой массив представляет собой данные динамической таблицы. но я хочу один массив Это означает пример формата json, приведенный ниже.

как мне объединить эти два jsons?

Пожалуйста, обратитесь к моей скрипке и проверьте консоль ..

FIDDLE ЗДЕСЬ

Я хочу, чтобы json выглядел,

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);
});

Вот мой фактический код

// 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

Мне потребовалось некоторое время, чтобы понять, что вы имели в виду.

Итак, вам нужно было объединить два массива: mainArr и tempArr, и вместо использования concat вы использовали функцию push, котораяприводит к тому, что результирующий массив будет массивом с несколькими массивами.

Just Replace,

mainArr.push(tmpArr);

to

mainArr = mainArr.concat(tmpArr);

Я знаю, это отложенный ответи, возможно, вы уже исправили проблему. Но если это поможет:)