Add additional array to serialized form data

Question

I would like to make an ajax jquery post. I have serialized the form data but my endpoint requires additional values to be added to the serialized form data to be posted together.

The object to be appended to the serialized form data is

"bridgeConfigurations": [
    {
        "configName":"Provider_Account_Id",
        "configValue":"xxxxx"
    },
    {
    "configName":"Provider_Auth_Token",
    "configValue":"xxxxx"
    }
]

Any help on how this can be achieved

Answer 1

You can combine like this, i am not sure what is your exact expectation. i have added 3 examples:

var $form = $('form');
var data = {
  "bridgeConfigurations": [
    {
      "configName":"Provider_Account_Id",
      "configValue":"xxxxx"
    },
    {
      "configName":"Provider_Auth_Token",
      "configValue":"xxxxx"
    }
  ]
};

// EXAMPLE 1
let formData = $($form).serializeArray();
let mergeData = $.merge(formData, data["bridgeConfigurations"]);
let finalData = JSON.stringify(mergeData);
console.log("Example 1: ", finalData);

// EXAMPLE 2
let formData1 = $($form).serializeArray();
let mergeData1 = $.merge(formData1, [data]);
let finalData1 = JSON.stringify(mergeData1);
console.log("Example 2: ", finalData1);

// EXAMPLE 3
let formData2 = $($form).serializeArray();
let formDatas2 = {};
formData2.forEach((value) => { formDatas2[value['name']] = value['value']; });
let mergeData2 = $.extend({}, formDatas2, data);
let finalData2 = JSON.stringify(mergeData2);
console.log("Example 3: ", finalData2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="name" value="demoName">
  <input type="email" name="email" value="dummy@mail.com">
</form>

Hope this help.