构建HTML表单输出

Question

我有一个带有JSON输出的HTML表单，其结构如下：

<form>
  <input name="a1">
  <input name="a2">
  <input name="a3">
  <input name="b1">
  <input name="b2">
  <input name="b3">
  <input name="c1">
  <input name="c2">
  <input name="c3">
</form>

{
  "a1": "some value",
  "a2": "another value",
  "a3": "yet another value",
  "b1": "some value",
  "b2": "another value",
  "b3": "yet another value",
  "c1": "some value",
  "c2": "another value",
  "c3": "yet another value"
}

但我希望将其排序为：

{
  "a": {
    "1": "some value",
    "2": "another value",
    "3": "yet another value"
  },
  "b": {
    "1": "some value",
    "2": "another value",
    "3": "yet another value"
  },
  "c": {
    "1": "some value",
    "2": "another value",
    "3": "yet another value"
  }
}

我的问题： 在HTML中 ，有没有一种方法可以构造表单以使JSON输出在发送到服务器时像这样显示？ 我正在为服务器使用NodeJS。 让我知道您是否需要更多信息。

Answer 1

就像您一样，这就是我们在React项目中使用的方式。 只需创建JSON对象并将其存储在数据库中的任何位置，

例：

  orderForm: { name: { elementType: 'input', elementConfig: { type: 'text', name: 'name', placeholder: 'Your Name' }, value: '', label: 'Name', }, street: { elementType: 'input', elementConfig: { type: 'text', name: 'street', placeholder: 'Street' }, value: '', label: 'Street', }, zipCode: { elementType: 'input', elementConfig: { type: 'text', name: 'zipCode', placeholder: 'Zip Code' }, value: '', label: 'Zip Code', }, country: { elementType: 'input', elementConfig: { type: 'text', name: 'country', placeholder: 'Country' }, value: '', label: 'Country', } }, 

注入HTML，您可以猜测一下，这就是我们创建动态表单以从用户获取数据的方式。

 const formElementsArray = []; for (let key in this.state.orderForm) { formElementsArray.push({ id: key, config: this.state.orderForm[key] }); } {formElementsArray.map(formElement => ( <Input key={formElement.id} {...formElement.config} />} 

注意：如果发现任何问题，只需包装控制台，即可获得此问题。

开心！

Answer 2

你可以这样写

<form>
  <input name="a.one">
  <input name="a.two">
  <input name="a.three">
  <input name="b.one">
  <input name="b.two">
  <input name="b.three">
  <input name="c.one">
  <input name="c.two">
  <input name="c.three">
</form>

你会得到一个这样的对象

{
  "a": {
    "one": "some value",
    "two": "another value",
    "three": "yet another value"
  },
  "b": {
    "one": "some value",
    "two": "another value",
    "three": "yet another value"
  },
  "c": {
    "one": "some value",
    "two": "another value",
    "three": "yet another value"
  }
}

希望这可以帮助。 让我知道您是否还有其他问题。