axios 将表单数据转换为多维数组

wh6knrhe  于 12个月前  发布在  iOS
关注(0)|答案(2)|浏览(154)

我有一个表单,它有像nameemailother[a]other[b]这样的字段,这些字段是由AJAX提交的。目前,在使用Axios进行发布之前准备数据的脚本就是这样做的

const data = Array.from(new FormData(this.form).entries()).reduce((memo, pair) => ({
    ...memo,
    [pair[0]]: pair[1],
}), {});

字符串
产生

{
     "name":"X",
     "email":"Y",
     "other[a]":"A",
     "other[b]":"B",
  }


但需要

{
     "name":"X",
     "email":"Y",
     "other": {
       "a": "A",
       "b": "B"
     }
  }


我需要做什么才能使other字段成为嵌套数组?

cbjzeqam

cbjzeqam1#

要将其他字段转换为嵌套对象,您可以修改数据准备过程。您需要拆分字段名称并相应地构建对象。您可以使用以下函数:用途:

function transformFormData(formData) {
  const data = {};

  for (let [key, value] of formData.entries()) {
    if (key.startsWith('other[')) {
      const nestedKey = key.substring(key.indexOf('[') + 1, key.indexOf(']'));
      if (!data['other']) {
        data['other'] = {};
      }
      data['other'][nestedKey] = value;
    } else {
      data[key] = value;
    }
  }

  return data;
}data;
}

字符串
将当前的数据准备过程替换为以下函数:

const data = transformFormData(new FormData(this.form));


此函数遍历表单数据条目并检查键是否以'other'开头。如果是,则提取嵌套键(如'a'或'b')并相应地构造对象。否则,将键值对直接存储在主对象中。

ymzxtsji

ymzxtsji2#

既然带方括号的语法在JavaScript中没有用,你可以跳过方括号,创建你自己的语法。除了other[a]之外,建议使用:other.aother/aother_a等。
我的建议是使用一个与JavaScript中的标识符不冲突的分隔符。例如,在表单中,名称是有用的。您可以使用名称“email”来引用输入元素,如:document.forms.form01.email。如果名称中有方括号,则这种引用元素的方式将不那么优雅。这不起作用:document.forms.form01.other[a],但这可以:document.forms.form01['other[a]']。考虑到这一点,下划线_将是一个很好的选择:document.forms.form01.other_a
在下面的示例中,您可以使用“下划线语法”创建嵌套对象:

let formdata = new FormData(document.forms.form01);

let data = [...formdata].reduce((data, pair) => {
  let subobj = data;
  pair[0].split('_').forEach((key, i, arr) => {
    let value = (i + 1 < arr.length) ? {} : pair[1];
    if (!subobj[key]) subobj[key] = value;
    subobj = subobj[key];
  });
  return data;
}, {});

console.log(data);

个字符

相关问题