JavaScript循环遍历输入并创建对象数组。

Question

我试图循环遍历

中的输入元素，以创建对象数组。

<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>

我正在尝试创建以下对象数组。

 unavailability: [
      { from: '12:00', to: '12:30' },
      { from: '13:00', to: '13:30' }
    ]

这是我到目前为止尝试过的，但结果相差很大。

var dataArray = []
$("#time").find('input').each(function() {
  var data = {};

  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" />
  <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>

JSFiddle

- Deano

---

在同一个<form>中，除了单选按钮外，不应该有多个具有相同“name”属性的输入。 - Bergi

Answer 1

您可以迭代所有具有名称属性值为“from”的元素。 要获取“to”值，请使用jQuery的“next（）”方法。

Use .val() method to get the value of item.

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

- Tushar

---

我认为他真正想要获取值，而不是占位符。 - Bergi

@Tushar 如果你能帮我解决这个问题就更好了。https://stackoverflow.com/q/48353270/3297613 - Avinash Raj

Answer 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>

顺便提一下，你混淆了12小时和24小时制（13:00）。可能应该写成下午1:00（1:00 pm）？

我还会将类型更改为type="time"，以避免错误。这会给你一个漂亮的时间选择器，并且如果用户输入12或24小时值，它会进行归一化处理。如果需要更好的验证，您还可以使用步长/最小值/最大值/必填项。

- Endless

---

var fd = new FormData(time) 应该改为 ...('time') 吗？ - TripeHound

通常情况下，您会执行var time = document.getElementById('time')，但是任何具有ID的元素，如果其名称不在全局窗口范围内，则可以从window访问。请阅读此QA。这有点冒险，但为了这个简单演示的缘故，我选择使用...（'time'）。 - Endless

Answer 3

不要遍历每个输入框，而是需要遍历每个名称属性为form的交替输入框元素。然后创建正在迭代的元素和下一个相邻输入元素的JSON信息。

另外，12.30 AM 不是元素的值，而是占位符。您需要使用占位符替换值：

$("#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>

- Milind Anantwar

---

仔细查看dataArray。 - Pedram

Answer 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>

- Mamun

Answer 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);

更新的 fiddle

- Lalit

Answer 6

这里你需要使用一个事件处理器来处理任何值的更改，或者你需要为这些输入提供一些初始值。

另外，你可以按照下面所示进行迭代以获得所需的结果。

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>

- Rohit Agrawal

Answer 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>

https://jsfiddle.net/ss725ere/2/

- P.S.