Question

我的表中有两个字段（名称、角色）。我创建了一个表单，我可以在其中使用 jquery 使用添加和删除按钮动态添加和删除输入字段。所以我创建的数组不是固定宽度的数组。我正在使用 map 方法来提取输入项的值，但它以数组的形式返回输出。下面是js函数和输出。

$('#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"]

而我想将数据提取为批量对象，因为我想将此数据提交给 api spring boot api 端点。 API 工作正常，因为我可以通过邮递员插入多个对象。

如何将此数据转换为对象（使用 item.name(key) 和 item.value(value)

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

HTML 页面

<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文件

$(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

您可以使用带有四个参数的 reduce 从原始 [{ name: 'John', role: 'Manager' },{ name: 'bob', role: 'Clerk' }, { name: 'Mike', role: 'President' } ] 数组构造 ["John", "Manager", "bob", "Clerk", "Mike", "President"] 对象数组，如下所示：

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

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

1 个答案: