如何将特定于平面表单的数据结构转换为嵌套数据结构？

Question

我有一个要求，需要膨胀特定于表单的平面数据结构。在发送用户输入的值之前，我需要根据服务器 API 的期望构建一个数据结构。

假设我有以下来自用户输入的键值对

{
  state: "California",
  city: "New York",
  full_name: "rererer",
  email: "[email protected]",
  dob: "1/1/2014",
  pincode: "222222",
  gender: "male",
}

数据 API 确实需要一个嵌套对象，其中

1. an

   Address

   将包括

   state

   、

   city

   和

   full_name

2. 并且

   Profile

   必须具有

   email

   、

   dob

   、

   pincode

   和

   gender

   。

如何将上述键值对转换为以下嵌套数据结构？

{
  Address: {
    state: "California",
    city: "New York",
    full_name: "rererer",
  },
  Profile: {
    email: "[email protected]",
    dob: "1/1/2014",
    pincode: "222222",
    gender: "male",
  },
}

Answer 1

简单的示例是，您可以将 json 作为 X 存储在变量中，其中您可以创建 2 个对象 Address 和 Profile，然后将 X 变量中的所需字段放入其各自的对象，然后将该对象合并在一起。

示例：

var josnObj = { state: "California", city: "New York", full_name: "rererer", email: "[email protected]", dob: "1/1/2014", pincode: "222222", gender: "male" };

var address = new Object();
var profile = new Object();
var combinedObj = new Object();

address.state = josnObj.state 
address.city = josnObj.city 
address.full_name = josnObj.full_name 

profile.email = josnObj.email
profile.dob = josnObj.dob
profile.pincode = josnObj.pincode
profile.gender = josnObj.gender

combinedObj.Address = address
combinedObj.Profile = profile

console.log(combinedObj);

您可以自动化此代码

Answer 2

应对此类挑战的通用方法几乎总是会利用

FormData

Web-API，其中人们可以从 表单数据的 entries创建原始数据对象。然后可以从之前检索到的和解构的原始数据轻松组装最终发送的有效负载数据...

function handleProfileAndAddressDataSubmit(evt) {
  evt.preventDefault();

  const { currentTarget: elmForm } = evt;
  const { action: serviceURL, method: apiMethod } = elmForm;

  const formData = new FormData(elmForm);
  const {
    // - destructured and partially renamed
    //   from the before created raw data object.
    state, location: city, full_name,
    email, dob, pincode, gender,
  } =
    // - creating the raw data object
    //   from the form-data's entries.
    Object.fromEntries([...formData.entries()]);

  const payload = {
    // - assambling the final payload object.
    Address: {
      state, city, full_name,
    },
    Profile: {
      email: `[${ email }](mailto:${ email })`, dob, pincode, gender,
    },
  };

  console.log({
    elmForm, formEntries: [...formData.entries()], rawData: {
      email, dob, gender, pincode, full_name, location: city, state,
    },
    payload, apiMethod, serviceURL,
  });
  console.log(
    `Payload data will be send via "${ apiMethod.toUpperCase() }" to "${ serviceURL }"`
  );
}
document
  .forms[0]
  .addEventListener('submit', handleProfileAndAddressDataSubmit);

body { margin: 0; }
fieldset  { margin: 0 4px 8px; padding: 8px; }
fieldset > label, label > span:first-child { display: block; margin: 0 0 4px 0; }
[type="submit"] { margin: 8px 16px; }
form { width: 35% ;}
.as-console-wrapper { left: auto!important; width: 64%; min-height: 100%; }

<form method="post" action="./api/service/path">
  <datalist id="gender-list">
    <option>non binary</option>
    <option>female</option>
    <option>male</option>
  </datalist>

  <datalist id="federal-states">
    <option>Alabama</option>
    <option>California</option>
    <option>Delaware</option>
    <option>Florida</option>
    <option>Georgia</option>
    <option>Hawaii</option>
    <option>Idaho</option>
  </datalist>

  <fieldset>
    <legend>Profile</legend>

    <label>
      <span>Email Address</span>
      <input type="email" required name="email" />
    </label>
    <label>
      <span>Date Of Birth</span>
      <input type="date" required name="dob" />
    </label>
    <label>
      <span>Gender</span>
      <input type="text" list="gender-list" required name="gender" />
    </label>
    <label>
      <span>Pin Code</span>
      <input type="text" inputmode="numeric" pattern="\d{6}" required value="000000" name="pincode" />
    </label>

  </fieldset>

  <fieldset>
    <legend>Address</legend>

    <label>
      <span>Full Name</span>
      <input type="text" required name="full_name" />
    </label>
    <label>
      <span>City / Location</span>
      <input type="text" required name="location" />
    </label>
    <label>
      <span>State</span>
      <input type="text" list="federal-states" required name="state" />
    </label>
  </fieldset>

  <button type="submit">Send</button>
</form>