f2o

f2o - Form to Object

Extracts form input data and transforms it to JavaScript object.

Example:

    // --- given this form input
    const form = (
      <form>
        <input name="firstName" defaultValue="Bob"/>
        <input name="lastName" defaultValue="Cat"/>
        <input name="emails.0" defaultValue="bob@xxx"/>
        <input name="emails.1" defaultValue="bob@yyy"/>
        <input name="address.city" defaultValue="Madrid"/>
        <input name="hobbies.0.name" defaultValue="Football"/>
        <input name="hobbies.0.type" defaultValue="Sports"/>
        <input name="hobbies.1.name" defaultValue="Tennis"/>
        <input name="hobbies.1.type" defaultValue="Sports"/>
      </form>
    );

    // --- expects this object
    const expected = {
      firstName: 'Bob',
      lastName: 'Cat',
      emails: ['bob@xxx', 'bob@yyy'],
      address: {
        city: 'Madrid'
      },
      hobbies: [
        {name: 'Football', type: 'Sports'},
        {name: 'Tennis', type: 'Sports'}
      ]
    };

    // --- execute test
    const input = extractInput(mount(form).node);
    const object = transformToObject(input);
    expect(object).to.eql(expected);

Features

• Works with any UI library as long as input data can be extracted throught HTML input elements.
• Form data can describe nested object and array structures using the following notation:
  • . indicate nested object.
  • numbers indicate array.
• Unit tests to ensure things work as expected.
• No dependencies to other packages.