Вход JavaScript loop over создает массив объектов

Ответ 1

Вы можете выполнять итерацию по всем элементам, имеющим значение атрибута имени как from. Чтобы получить значение to, используйте метод next() для jQuery.

Используйте метод .val(), чтобы получить значение элемента.

$('#submit').click(function() {
  var data = [];

  $('#time input[name="from"]').each(function() {
    data.push({
      from: $(this).val(),
      to: $(this).next().val()
    });
  });

  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter times in the below textboxes
<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

<button id="submit">Submit</button>

Ответ 2

Я бы решил это с помощью FormData. Это означает меньше DOM-навигации и меньше шансов сделать что-то неправильно, если вы измените разметку позже. Это также означает, что вам нужно будет поменять ваш элемент div на элемент формы (если у вас его нет где-то выше - в этом случае вы можете использовать этот элемент формы в конструкторе и сохранить элемент div):

// Get a formdata instance
var fd = new FormData(time)

// Get all values
var from = fd.getAll('from')
var to = fd.getAll('to')

// Transform
var unavailable = from.map((from, i) => ({ from, to: to[i] }))

console.log({unavailable})

<form id="time">
  <input type="text" name="from" placeholder="12:00 AM" value="12:00" />
  <input type="text" name="to" placeholder="12:30 AM"  value="12:30" />
  <input type="text" name="from" placeholder="13:00 AM" value="13:00" />
  <input type="text" name="to" placeholder="13:30 AM" value="13:30" />
</form>

Ответ 3

Вместо итерации по каждому входу вам нужно перебирать каждый альтернативный элемент ввода с атрибутом name, равным форме. Затем создайте информацию JSON для элемента, который вы выполняете, и ближайшего следующего входного элемента sibling.

Также 12.30 утра - это не значение элемента, его местозаполнитель. Вам нужно заменить значение заполнителем:

$("#time").find('input[name="from"]').each(function() {
    var data = {};
    data[this.name] = this.placeholder;
    var nextInput = $(this).next()[0];
    data[nextInput .name] = nextInput.placeholder;
    dataArray.push(data);
});

Рабочий демонстрационный пример

Лучший способ добиться этого - использовать функцию jQuery .map(), возвращающую объект JSON вместе с .get() для создания массива объектов JSON:

var dataArray = $("#time").find('input[name="from"]').map(function() {
    var nextInput = $(this).next()[0];
    var jo = {};
    jo[this.name]=this.placeholder;jo[nextInput.name] = nextInput.placeholder
    return jo;
}).get();

var dataArray = $("#time").find('input[name="from"]').map(function() {
    var nextInput = $(this).next()[0];
    var jo = {};
    jo[this.name]=this.placeholder;jo[nextInput.name] = nextInput.placeholder
    return jo;
}).get();

console.log(dataArray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

Ответ 4

Вы можете сделать это следующим образом:

var unavailability = [];
$('#time input[name=from]').each(function(i, input){
  unavailability.push({
    from: $(this).attr('placeholder').split(' ')[0],
    to: $(this).next().attr('placeholder').split(' ')[0]
  });
});

console.log(unavailability);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"> 
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

Ответ 5

var dataArray = [];
$("#time").find('input[name="from"]').each(function() {
    var data = {};
    data.from = this.value;
    data.to = $(this).next().val();
    dataArray.push(data);
});

console.log(dataArray);

Обновлена ​​скрипка

Ответ 6

Здесь либо вам нужно использовать обработчик событий для изменения значений любого input, либо вам нужно дать некоторые начальные значения этим входам.

Также вы можете выполнить итерацию, как показано ниже, чтобы получить желаемый результат.

var dataArray = [];
var data = {};
$("#time").find('input').each(function(i) {
    if(i%2 === 0){
      data={};
      data[this.name] = this.value;
    } else{
      data[this.name] = this.value;
    	dataArray.push(data);
    }
});

console.log(dataArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"> 
  <input type="text" name="from" placeholder="12:00 AM" value="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" value="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" value="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" value="13:30 AM" />
</div>

<span id="output"></span>

Ответ 7

В моем ответе я нажимаю новый элемент в массив только, если this.name === "from". Если this.name === "to", я добавляю новое свойство к последнему нажатому элементу, и, наконец, у нас есть 2 объекта в массиве и 2 свойства в каждом объекте:

$("#btn").click(doStuff);

function doStuff() {
  var dataArray = []
  var newArrayLength;
  $("#time").find('input').each(function() {
    if (this.name === "from") {
      var data = {};
      data[this.name] = this.value 
      newArrayLength = dataArray.push(data);
    } else if (this.name === "to") {
      dataArray[newArrayLength - 1][this.name] = this.value; 
    }
  });
  console.log(dataArray);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time"> 
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

<span id="output"></span>

<button id="btn">Click</button>