替换数组中的值

Question

我正在尝试根据输入字段将输入值推入数组。但是我在这里面临的问题是最后一个输入字段将替换数组中的所有对象，如下所示：

[
   {
      "label":"4",
      "type":"",
      "process":"",
      "name":"5",
      "col":"6"
   },
   {
      "label":"4",
      "type":"",
      "process":"",
      "name":"5",
      "col":"6"
   }
]

我期望它返回的分别是每个字段中每个输入的值。这意味着，不要看到上面的对象，而应该以正确的顺序标记标签：1，名称：2，列：3等。我不确定我在这里缺少什么，因为我的代码对我来说很有意义。我在做什么错？

 $(document).ready(() => {
  $('.add-field').click(e => {
    e.preventDefault();

    generateField();
  });

  $('.form-maker').submit(e => {
    e.preventDefault();
    const temp = {},
      payload = [];

    $('.dynamic-group').each((i, group) => {
      $(group)
        .find('input, select')
        .each((ii, field) => {
          temp[field.name] = field.value;
        });

      payload.push(temp);
    });

    console.log(payload);
  });

  const generateField = () => {
    $('.dynamic-fields').append(
      `
    <div class="form-inline dynamic-group">
      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Input Label</div>
        </div>
        <input type="text" class="form-control" placeholder="Input Label" name="label">
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Input Type</div>
        </div>
        <select name="type" name="type">
          <option value="">Something in here</option>
        </select>
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Process</div>
        </div>
        <select name="process" name="process">
          <option value="">Something in here</option>
        </select>
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Input Name</div>
        </div>
        <input type="text" class="form-control" placeholder="Input Name" name="name">
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">DB. Col Name</div>
        </div>
        <input type="text" class="form-control" placeholder="DB. Col Name" name="col">
      </div>
    </div>
    
    <hr />
    
    `
    );
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>

<button class="add-field">
    Add Field
</button>

<button type="submit">
    Make Form
</button>

Answer 1

这是因为您每次都引用相同的对象，因此获取更新的最后一件事获胜。您想要将对象的副本推入数组：

$('.dynamic-group').each((i, group) => {
      $(group)
        .find('input, select')
        .each((ii, field) => {
          temp[field.name] = field.value;
        });

      payload.push($.extend(true,{},temp));
    });

有多种方法可以复制对象-在这种情况下，我使用JQuery的extend方法来复制对象的真实副本，https://api.jquery.com/jquery.extend/

$.extend(true,{},temp)

Answer 2

temp变量必须放在每个组的内部循环中：

$(document).ready(() => {
  $(".add-field").click(e => {
    e.preventDefault();

    generateField();
  });

  $(".form-maker").click(e => {
    e.preventDefault();
    
    const payload = [];

    $(".dynamic-group").each((i, group) => {
    
      const temp = {};

      $(group)
        .find("input, select")
        .each((ii, field) => {
          temp[field.name] = field.value;
        });

      payload.push(temp);
    });

    console.log(payload);
  });

  const generateField = () => {
    $(".dynamic-fields").append(
      `
			<div class="form-inline dynamic-group">
				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Input Label</div>
					</div>
					<input type="text" class="form-control" placeholder="Input Label" name="label">
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Input Type</div>
					</div>
					<select name="type" name="type">
						<option value="">Something in here</option>
					</select>
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Process</div>
					</div>
					<select name="process" name="process">
						<option value="">Something in here</option>
					</select>
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Input Name</div>
					</div>
					<input type="text" class="form-control" placeholder="Input Name" name="name">
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">DB. Col Name</div>
					</div>
					<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
				</div>
			</div>
			
			<hr />
			
			`
    );
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>

<button class="add-field">
    Add Field
</button>

<button class="form-maker" type="submit">
    Make Form
</button>