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

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

1 个答案: