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

标签 javascript html json javascript-objects

在提交表单时,我得到一个表单对象并制作对象。现在的情况是我有输入类型数组,例如,每次我添加最多五个新输入类型文本时,我都会在单击加号时输入类型“任务链接”。 它可能是三个、两个、五个,或者如果我将来增加到二十个,我将如何在 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];
    }

最佳答案

您不是很清楚您需要对象还是数组,所以这里有几个示例可以说明两者。这些示例在 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 - 在javascript中从输入类型数组创建json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47221978/

相关文章:

javascript - 清除文本和重置搜索输入的按钮不起作用

javascript - 全局变量不显示在div中

.net HttpClient 与自定义 JsonConverter

javascript - 处理二维数组中的 json 响应

javascript - Angular 4 - 我的应用程序在使用 window.print() 打印 Material MMDialog 组件的 html 文档后卡住

javascript - 带变量的 Jquery eq 选择器不起作用

javascript - 我们如何在关闭第一个弹出窗口后打开剑道第二个弹出窗口?

css - 如何防止子 div 超出父 div 的高度?

html - 'clientHeight' 不计算所有元素 - React

javascript - 如何使用 JSON.parse() 显示正确的值?