如何使用 Javascript / Jquery 創建具有多個元素的可增加多維對象

Question

我想建立一個可增加的數據上傳文件，

目前的HTML是這樣的

 function getData() { let newArr = []; var room = {}; var time = {}; var prod = {}; var quan = {}; var room = $('.room').each(function() { room.push($(this).val()); }); var time = $('.time').each(function() { time.push($(this).val()); }); var prod = $('.prod').each(function() { prod.push($(this).val()); }); var quan = $('.quan').each(function() { quan.push($(this).val()); }); newArr.push({ room, time, prod, quan, }); console.log(newArr) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="insert"> <input type="text" name="room[]" class="room"> <input type="text" name="time[]" class="time"> <input type="text" name="prod[]" class="prod"> <input type="text" name="quan[]" class="quan"> </div> <div class="insert"> <input type="text" name="room[]" class="room"> <input type="text" name="time[]" class="time"> <input type="text" name="prod[]" class="prod"> <input type="text" name="quan[]" class="quan"> </div> <div> <button name="btnSubmit" onclick="getData()">Click</button> </div>

希望得到以下結構的日期

Array 
[
  Object1 => {
    "room":"string/number", "time":"string/number", "prod":"string/number", "quan":"string/number"
  }
  Object2 => {
    "room":"string/number", "time":"string/number", "prod":"string/number", "quan":"string/number"
  }
]

然后錯誤告訴我不能在對象上使用.push() ，

或者它只是不斷變得undefined ；

在我檢查了一些文章之后，但似乎解決方案設置為formData()

JavaScript 循環輸入創建一個對象數組

我已經有一個formData()並包含需要上傳的文件。

或者其中一些將使用.map()函數更改為另一個數組。

這使我嘗試將多個數組合並為一個或類似以下解決方案，

現在我正在計算這些答案，但還不是很匹配

在javascript1中將多個數組元素組合成單個對象

將對象數組從數組轉換為對象屬性的對象

在目前這一點上，希望有人能幫助我。

---

對於可增加的解釋：

經過一些更改，現在使用 jQuery 前置/附加一個對象，第二個表單已更改為表格，第一個表單保留為文件上傳。

$('#theTable').prepend(`
<tr class="insert">
  <td><input type="text" name="room[]" class="room"></td>
  <td><input type="text" name="time[]" class="room"></td>
  <td><input type="text" name="prod[]" class="room"></td>
  <td><input type="text" name="quan[]" class="room"></td>
</tr>
`);

本機javascript（不使用但工作）

function addInputField() {
  // table
  const table = document.getElementById('theTable');
  // row
  let newRow = table.insertRow(-1);
  newRow.innerHTML += `
    <td><input type="text" name="room[]" class="room"></td>
    <td><input type="text" name="time[]" class="time"></td>
    <td><input type="text" name="prod[]" class="prod"></td>
    <td><input type="text" name="quan[]" class="quan"></td>
    `;
  newRow.className = 'insert';
  table.prepend(newRow);
}

Answer 1

您收到錯誤是因為您試圖將值push送到對象。 push用於將值推送到數組而不是對象。

嘗試這個

 function getData() { let newArr = []; $('.insert').each(function(){ newArr.push({ room: $(this).find('[name="room[]"]').val(), time: $(this).find('[name="time[]"]').val(), prod: $(this).find('[name="prod[]"]').val(), quan: $(this).find('[name="quan[]"]').val(), }) }) console.log(newArr) return newArr }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="insert"> <input type="text" name="room[]" class="room"> <input type="text" name="time[]" class="time"> <input type="text" name="prod[]" class="prod"> <input type="text" name="quan[]" class="quan"> </div> <div class="insert"> <input type="text" name="room[]" class="room"> <input type="text" name="time[]" class="time"> <input type="text" name="prod[]" class="prod"> <input type="text" name="quan[]" class="quan"> </div> <div> <button name="btnSubmit" onclick="getData()">Click</button> </div>