如何從相關的表單元素中創建、收集和以編程方式（每個表單元素一個條目）聚合物件？

我想按來自父母子女的資料物件進行分組 <div>

這是我的代碼：

<form id="myForm">
  <div id="parent-div">
    <div>
      <input type="text" style="margin: 0;" name="t-name-1" value="value1" />
      <span>
        <input type="text" name="t-quantity-1" value="1" />
        <input type="text" name="t-frequency-1" value="6" />
      </span>
    </div>
    <div>
      <input type="text" style="margin: 0;" name="t-name-2" value="value2" />
      <span>
        <input type="text" name="t-quantity-2" value="2" />
        <input type="text" name="t-frequency-2" value="8" />
      </span>
    </div>
  </div>
  <button type="submit">
    Submit
  </button>
</form>

var group = [];

$('#myForm').on('submit', function(e){
e.preventDefault();
    var elements = document.getElementById("myForm").elements;
  
  for(var i = 0 ; i < elements.length - 1 ; i  ){
        var item = elements.item(i);
        //console.log(i, item.name, '-', item.value);
        
        if(item.name.includes(item.name.split("-")[2])){
            var obj = {};
          var name = item.name.split("-")[1];
          obj[ name ] = item.value
                    group.push(obj);
        }
    }
    
    console.log(group);
});

我得到的輸出是：

[{
  name: "value1"
}, {
  quantity: "1"
}, {
  frequency: "6"
}, {
  name: "value2"
}, {
  quantity: "2"
}, {
  frequency: "8"
}]

所需的輸出：

var group = [
  {
    "name": "value1",
    "quantity": "1",
    "frequency": "6"
  },
  {
    "name": "value2",
    "quantity": "2",
    "frequency": "8"
  }
]

這是一個有效的 jsFiddle：https ://jsfiddle.net/7yxzpsd5/45/

uj5u.com熱心網友回復：

最靈活的方法不對表單的內部 DOM 層次結構做任何假設。相反，它將專注于所有表單元素的name屬性共有的命名模式，即 ... "t-<key>-<id>"。

因此，一個完全與 DOM 結構無關但部分可重用的方法將是二分/二重的。

• 第一部分確實介紹了用于識別任何表單元素的正則運算式。這個正則運算式如下/^t-(?<key>\w )-(?<id>\d )$/...... 它具有用于捕獲值和部分的命名組。實際任務...namekeyid

  • 將表單元素集合轉換為陣列

  • filters 所有有效的（根據正則運算式）表單元素。

  • reduces 過濾后的陣列到一個串列中 dataItems

  • reducer 函式將正則運算式作為配置物件的一部分提供，該物件也作為初始值傳遞給reduce。

• 第二個任務被實作為通用且可重用的函式，它dataItem在表單元素的提取id以及該元素的提取key和它的value.

function collectDataItemsByElementKeyAndId(collector, elmNode) {
  const { regX, list, map } = collector;
  const { key, id } = regX.exec(elmNode.name)?.groups ?? {};

  let dataItem = map[id];
  if (!dataItem) {

    dataItem = map[id] = {};
    list.push(dataItem);
  }
  Object.assign(dataItem, { [key]: elmNode.value });
  
  return collector;
}

function handleSubmit(evt) {
  evt.preventDefault();

  const regXKeyAndId = /^t-(?<key>\w )-(?<id>\d )$/;

  const dataItemList = Array
    .from(this.elements) // `this` refers to the form element.

    .filter(elm => regXKeyAndId.test(elm.name))
    .reduce(collectDataItemsByElementKeyAndId, {

      regX: regXKeyAndId,
      map: {},
      list: [],

    }).list;

  console.log({ dataItemList });
}

$('#myForm').on('submit', handleSubmit);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
  <div id="parent-div">
    <div>
      <input type="text" style="margin: 0;" name="t-name-1" value="value1" />
      <span>
        <input type="text" name="t-quantity-1" value="1" />
        <input type="text" name="t-frequency-1" value="6" />
      </span>
    </div>
    <div>
      <input type="text" style="margin: 0;" name="t-name-2" value="value2" />
      <span>
        <input type="text" name="t-quantity-2" value="2" />
        <input type="text" name="t-frequency-2" value="8" />
      </span>
    </div>
  </div>
  <button type="submit">
    Submit
  </button>
</form>

uj5u.com熱心網友回復：

$('#myForm').on('submit', function(e) {
  e.preventDefault();
  var divs = document.querySelectorAll('#myForm > #parent-div > div')
  var group = []

  divs.forEach(div => {
    var inputs = div.querySelectorAll('input')
    var obj = {}

    inputs.forEach(i => {
      var name = i.getAttribute('name').split('-')[1]
      obj[name] = i.value
    })

    group.push(obj)
  })

  console.log(group)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <div id="parent-div">
    <div>
      <input type="text" style="margin: 0;" name="t-name-1" value="value1" />
      <span>
        <input type="text" name="t-quantity-1" value="1" />
        <input type="text" name="t-frequency-1" value="6" />
      </span>
    </div>
    <div>
      <input type="text" style="margin: 0;" name="t-name-2" value="value2" />
      <span>
        <input type="text" name="t-quantity-2" value="2" />
        <input type="text" name="t-frequency-2" value="8" />
      </span>
    </div>
  </div>
  <button type="submit">
    Submit
  </button>
</form>

標籤：

上一篇：Kotlin-在JSON物件android中獲取陣列中的值

下一篇：格式化物件陣列