javascript - 在javascript中从输入类型数组创建json

Question

在提交表单时，我得到一个表单对象并制作对象。现在的情况是我有输入类型数组，例如，每次我添加最多五个新输入类型文本时，我都会在单击加号时输入类型“任务链接”。它可能是三个、两个、五个，或者如果我将来增加到二十个，我将如何在 javascript 中处理它来生成对象，请参见下面的代码

See screenshot for better understanding

<input type="text" name="arr[]">
<input type="text" name="arr[]">

function submit_task_form (form_obj) {

    var get_form = document.getElementById(form_obj);

    var form_data = {};
    for(var i=0; i<get_form.length; i++) {
        form_data.task_link = get_form[i];
    }

Answer 1

您不是很清楚您需要对象还是数组，所以这里有几个示例可以说明两者。这些示例在 ES6 中。如果您不熟悉语法，我可以用 ES5 重写它们。

这两个示例都假设输入元素上有一个名为 link 的类(以将它们与您可能拥有的任何其他输入区分开来)。

<input class="link" value="sdfs" />

1) 数组 DEMO

获取输入并使用 map 对其进行迭代:

function getLinks() {
  const links = document.querySelectorAll('.link');
  return [...links].map(link => link.value);
}

输出

[ "sdfs", "34", "min", "987" ]

ES5 语法 DEMO

function getLinks() {
  var links = document.querySelectorAll('.link');
  var arr = [];
  for (var i = 0; i < links.length; i++) {
    arr.push(links[i].value);
  }
  return arr;
}

2) 对象 DEMO

这使用 data-id 属性作为链接值的键。

<input class="link" data-id="1" value="sdfs" />

这次我们使用 reduce 创建一个对象。

function getLinks() {
  const links = document.querySelectorAll('.link');
  return [...links].reduce((obj, link) => {
    const id = link.dataset.id;
    obj[id] = link.value;
    return obj;
  }, {});
}

输出

{
  1: "sdfs"
  2: "34"
  3: "min"
  4: "987"
}

ES5 语法 DEMO

function getLinks() {
  const links = document.querySelectorAll('.link');
  var obj = {};
  for (var i = 0; i < links.length; i++) {
    let id = links[i].dataset.id;
    obj[id] = links[i].value;
  }
  return obj;
}