Structuring HTML form output

Question

I have an HTML form with JSON output structured as so:

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

but I'd like it to be sorted like this:

{
  "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"
  }
}

My Question: In the HTML , is there a way to structure the form to make the JSON output show up like that when I send it to my server? I'm using NodeJS for my server. Let me know if you need any more info.

Answer 1

This is how, we're using in React project , as you did. just create JSON object and store it in Database wherever you want,

Example:

  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', } }, 

injecting in to HTML, you can take a guess, this's how we create a dynamic form to get data from user.

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

Note: if you found any issue, just wrap the console, by this you can get.

Happy codin'!

Answer 2

you can write it like this

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

and you'll get an object like this

{
  "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"
  }
}

hope this helps. let me know if you have more question.