结构化 HTML 表单输出答案

【问题标题】：Structuring HTML form output结构化 HTML 表单输出
【发布时间】：2019-11-26 02:17:42
【问题描述】：

我有一个带有 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。如果您需要更多信息，请告诉我。

【问题讨论】：

那不是排序。您当前的代码是什么？你试过什么？
在我看来是有效的 JSON，JSON.stringify(object) 然后是 JSON.parse(ajaxString)
@StackSlave 这与问题有什么关系？问题是关于重组一个对象。
熟悉how to access and process nested objects, arrays or JSON并使用可用的Object和Array方法。
首先，在 html 中使用 name="a[]" 语法。然后在服务器端，迭代req.body.a得到a[]元素和索引，这样你就可以创建json了。

标签： javascript html node.js json forms

【解决方案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} />}

注意：如果您发现任何问题，只需将控制台包装起来即可。

编码愉快！

【讨论】：

【解决方案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"
  }
}

希望这会有所帮助。如果您还有其他问题，请告诉我。

【讨论】：