JavaScript循环输入创建一个对象数组

I'm trying to loop over input elements in div, to create an array of objects

我试图在div中循环输入元素，以创建一个对象数组

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

I'm trying to create the following array of objects.

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

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

Here is what I have tried so far, but result is quite different.

这是我到目前为止所尝试的，但结果却截然不同。

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

的jsfiddle

7 个解决方案

#1

I would have solved it with FormData. It means less DOM navigation and less chance of doing something wrong if you change the markup later. This also means you would have to change your div element to a form element (unless you have it somewhere higher up - in that case you could use that form element in the constructor and keep the div element):

我会用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>

7 个解决方案

#1

更多相关文章

随机推荐