Зацикливание полей формы и обновление значений из массива

Question

У меня есть, из которого выглядит

    <div class="book-form">
    <input type="text" id="book_qty" name="book_qty[0]" value="" >
    <input type="text" id="book_unit" name="book_unit[0]" value="" >
    <input type="text" id="book_name" name="book_name[0]" value="" >
    <input type="text" id="book_notes" name="book_notes[0]" value="" >

    <input type="text" id="book_qty" name="book_qty[1]" value="" >
    <input type="text" id="book_unit" name="book_unit[1]" value="" >
    <input type="text" id="book_name" name="book_name[1]" value="" >
    <input type="text" id="book_notes" name="book_notes[1]" value="" >
    </div>

тогда у меня есть массив, который состоит из тех же значений отображения для формы выше

    0: Array(4)
    0: "1 "
    1: "boxes "
    2: "Math"
    3: "in Stock"
    length: 4

    1: Array(4)
    0: "2 "
    1: "boxes "
    2: "science "
    3: " "
    length: 4

Я пытаюсь перебрать массив и обновить поле формы соответственно.

это мой код, который я пробовал

  var all_inputs = $(".autofill input[type=text]");
  $(all_inputs).each(function() {
  $.each(myTableArray, function (n, elem) {
  console.log(elem);
  all_inputs.val(elem);
  });
  });

но это заполняет форму теми же самыми последними значениями.

Пожалуйста, помогите.

Answer 1

Нет необходимости проходить через входы.Это массив, который вы хотите просмотреть и использовать текущий индекс для доступа к входу, чтобы заполнить его значение:

var myTableArray = [
  ["1 ", "boxes ", "Math", "in Stock"],
  ["2 ", "boxes ", "science ", " "]
];

var all_inputs = $("input[type=text]");
var cnt = 0;

$.each(myTableArray, function(n, e) {
  $.each(e, function(n, elem) {
    console.log(elem);
    $(all_inputs.get(cnt)).val(elem);
    cnt++;
  });
});

Вот рабочая скрипка.

Answer 2

const array = [
  ["1 ", "boxes ", "Math", "in Stock"],
  ["2 ", "boxes ", "science ", " "]
];
array.forEach(([qty, unit, name, notes], i) => {
  $(`input[name="book_qty[${i}]"]`).val(qty.trim());
  $(`input[name="book_unit[${i}]"]`).val(unit.trim());
  $(`input[name="book_name[${i}]"]`).val(name.trim());
  $(`input[name="book_notes[${i}]"]`).val(notes.trim());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="book-form">
  <input type="text" id="book_qty" name="book_qty[0]" value="">
  <input type="text" id="book_unit" name="book_unit[0]" value="">
  <input type="text" id="book_name" name="book_name[0]" value="">
  <input type="text" id="book_notes" name="book_notes[0]" value="">

  <input type="text" id="book_qty" name="book_qty[1]" value="">
  <input type="text" id="book_unit" name="book_unit[1]" value="">
  <input type="text" id="book_name" name="book_name[1]" value="">
  <input type="text" id="book_notes" name="book_notes[1]" value="">
</div>

Цикл по массиву, а не по входам.