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.

That’s not sorting. What is your current code? What have you tried? — Sebastian Simon, Nov 26 '19 at 02:20
Looks like valid JSON to me, `JSON.stringify(object)` then `JSON.parse(ajaxString)` — StackSlave, Nov 26 '19 at 02:21
@StackSlave How is this related to the question? The question is about restructuring an object. — Sebastian Simon, Nov 26 '19 at 02:24
Familiarize yourself with [how to access and process nested objects, arrays or JSON](https://stackoverflow.com/q/11922383/4642212) and use the available [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods_of_the_Object_constructor) and [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods) methods. — Sebastian Simon, Nov 26 '19 at 02:29
For starter, use `name="a[]"` syntax in html. then at server side, iterate `req.body.a` to get `a[]` elements and indexes, so you can create json. — Dohab, Nov 26 '19 at 03:38

score 0 · Answer 1 · answered Nov 26 '19 at 04:04

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

score 0 · Answer 2 · answered Nov 26 '19 at 04:15

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.

Structuring HTML form output

2 Answers2