How can I do Javascript / Jquery create increase-able multi dimenssional object with multiple elements

Question

I want to build a increase-able data upload document,

currently the HTML like this

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>

hope to get date kind of the following structure

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"
  }
]

then the error tells me either can not user .push() on object,

or it just keep getting undefined;

after I check some articles but seems the solution as set up formData()

JavaScript loop over input creates an array of objects

which I already had a formData() and contains file need to upload.

or some of them would be using .map() function alter into another array.

which makes me trying to merge multiple array into one or like below solutions,

now I'm figuring those answers but not very match yet

combine multiple array elements into single object in javascript1

convert array of objects into object of objects properties from array

at this current point, hope someone could've help me.

---

for the increase-able explain :

after few change now use jQuery prepend/append an object, the second form has been changed to table, first form stays as file-upload.

$('#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>
`);

Native javascript (which not using but work)

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

You are getting the error because you're trying to push a value to an object. push is for pushing values to arrays not objects.

Try this

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>