如何将javascript动态数组转换为具有自定义键名的多个对象的数组

Question

I have two fields in my table (name, role). I created a form where i can add and remove input fields dynamically using add and remove buttons using jquery. so the array i am creating is not a fixed width array. I am using map method to extract values of input items, but it is returning output as an array. Below is js function and output.

$('#save').on('click',function () {
const inputs = document.getElementsByClassName('form-control');

const newInputs = [...inputs]

// const extractedValues = newInputs.map((item) => {

const extractedValues = newInputs.map((item) => {

    return item.value;

});

console.log(extractedValues)

["John", "Manager", "bob", "Clerk", "Mike", "President"]

whereas i want to extract data as bulk objects as i want to submit this data to and api spring boot api endpoint. API is working fine as i am able to insert multiple objects through postman.

How can i convert this data to an object (using item.name(key) and item.value(value)

[
{
"name": "John",
"role": "Manager"
},
{
"name": "John",
"role": "Manager"
},

Html Page

<h1>Dynamic Data Add</h1>
    <br>
   
    <section id="main-content">
      <div class="container">

<form action="" name="insert-form" id="insert-form" method="post">
<hr>
<div class="input-field">

  <table class="table table-bordered" id="table_field">

    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Actions</th>
    </tr>
    <tr>
      <td> <input class='form-control name' type="text" name="name[]" required=""> </td>
      <td> <input class='form-control role' type="text" name="role[]" required=""> </td>
      <td> <input type="button" class="btn btn-warning" name="add" id="add" value="Add Row"> </td>
    </tr>
  </table>
<div>
  <td> <input type="button" class="btn btn-success" name="save" id="save" value="Save Data"> </td>
</div>

</div>

</form>
      </div>
      


  </section>

JS File

$(document).ready(function () {
    
    
var html = '<tr class="newEntry"> <td> <input class="form-control" type="text" name="name[]" required=""> </td> <td> <input class="form-control" type="text" name="role[]" required=""> </td> <td> <input type="button" class="btn btn-danger" name="remove" id="remove" value="Remove"> </td> </tr>';

var x=1;

$('#add').click(function () {
    $("#table_field").append(html);
});

$('#table_field').on('click','#remove',function () {
    $(this).closest('tr').remove();
});



$('#save').on('click',function () {
const inputs = document.getElementsByClassName('form-control');

const newInputs = [...inputs]

// const extractedValues = newInputs.map((item) => {

const extractedValues = newInputs.map((item) => {

    return item.value;

});

console.log(extractedValues)

})

})

Answer 1

You can use reduce with four parameters to construct the [{ name: 'John', role: 'Manager' },{ name: 'bob', role: 'Clerk' }, { name: 'Mike', role: 'President' } ] objects array from the original ["John", "Manager", "bob", "Clerk", "Mike", "President"] array like below:

 const extractedValues = ["John", "Manager", "bob", "Clerk", "Mike", "President"]; const result = extractedValues.reduce(function(acc, curr, index, array) { if (index % 2 === 0) { acc.push({name : array[index], role: array[index + 1]}) } return acc; }, []); console.log(result);