Taking form field names and values creating a JSON

问题:

I have a form that is generated by a JSON response and each field name (Shopping_Orders_OrderInfo_ContactID) contains a nested object structure

so for instance this JSON part

 "Shopping": {
  "Orders": {
   "OrderInfo": {
     "OrderNumber": "",

will construct the following field name

<input type="text" name="Shopping_Orders_OrderInfo_OrderNumber" value="D0102864">

Here are the other fields

 <input type="text" name="Shopping_Orders_OrderInfo_ContactID" value="AS76372">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderDate" value="01/01/2018">
 <input type="text" name="Shopping_Orders_OrderInfo_Billing_BillingID" value="B673472">
 <input type="text" name="Shopping_Orders_OrderInfo_Billing_Name" value="Fred Smith">
 <input type="text" name="Shopping_Orders_OrderInfo_Delivery_DeliveryID" value="D769397">
 <input type="text" name="Shopping_Orders_OrderInfo_Delivery_Name" value="Joe Blogg">
 <input type="text" name="Shopping_Orders_OrderInfo_Discount_DiscountValue" value="10">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_NumberofItems" value="1">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_ProductID" value="P5763868">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_ItemName" value="Big Blue Box">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_Price" value="10">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_ProductID" value="P57638262">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_ItemName" value="Big Red Box">
 <input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_Price" value="20">

I need a Javascript function that will grab the above fields names and its values and reconstruct a JSON scheme like below. Basically it looks at the field name and works out the nested objects/arrays and keys with values.

 {
  "Shopping": {
  "Orders": {
   "OrderInfo": {
    "OrderNumber": "D0102864",
    "ContactID": "AS76372",
    "OrderDate": "01/01/2018",
    "Billing": {
     "BillingID": "B673472",
     "Name": "Fred Smith"
     },
    "Delivery": {
    "DeliveryID": "D769397",
     "Name": "Joe Blogg"
     },
     "Discount": {
      "DiscountValue": "10"
      },
     "OrderProduct": {
      "NumberofItems": "2",
       "Items": {
        "Item": [
        {
         "ProductID": "P5763868",
         "ItemName": "Big Blue Box",
         "Price": "10",
         },
        {
         "ProductID": "P57638262",
         "ItemName": "Big Red Box",
         "Price": "20",
        }
      ]
     }
    }
   }
  }
 }
} 

Below is a function that im trying to reflect the above process

function setValue(object, path, value) {
var last = path.pop();

path.reduce((o, k, i, kk) => o[k] = o[k] || (isFinite(i + 1 in kk ? 
kk[i + 1] : last) ? [] : {}), object)[last] = value;
}

function getValues(object) {
function iter(o, p) {
    if (o && typeof o === 'object') {
        Object.keys(o).forEach(k => iter(o[k], p.concat(k)));
    } else {
        result.push([p, o]);
    }
}

var result = [];
iter(object, []);
return result;
 }

//// here im not sure how to grab the fields and values from above 
var object = data['shopping'],
values = getValues(object),
objectFromValues = {};


 values.forEach(([keys, value]) => setValue(objectFromValues, keys, value));

  console.log(objectFromValues);
  console.log(values)

回答1:

You could take all input elements and take the name and split it by underscore for the path of the new object and the value and build a new object with the given information.

allInputs is an array like object which is iterable by borrowing an array method.

In setValue, the reduce callback checks if the next key is a stringed numerical value and takes an array as default object instead of an object.

function setValue(object, path, value) {
    var last = path.pop();

    path.reduce((o, k, i, kk) => o[k] = o[k] || (isFinite(i + 1 in kk ? kk[i + 1] : last) ? [] : {}), object)[last] = value;
}

var object = {},
    allInputs = document.getElementsByTagName('input');

Array.prototype.forEach.call(allInputs, ({ name, value }) => setValue(object, name.split('_'), value));

console.log(object);

<input type="text" name="Shopping_Orders_OrderInfo_OrderNumber" value="D0102864">
<input type="text" name="Shopping_Orders_OrderInfo_ContactID" value="AS76372">
<input type="text" name="Shopping_Orders_OrderInfo_OrderDate" value="01/01/2018">
<input type="text" name="Shopping_Orders_OrderInfo_Billing_BillingID" value="B673472">
<input type="text" name="Shopping_Orders_OrderInfo_Billing_Name" value="Fred Smith">
<input type="text" name="Shopping_Orders_OrderInfo_Delivery_DeliveryID" value="D769397">
<input type="text" name="Shopping_Orders_OrderInfo_Delivery_Name" value="Joe Blogg">
<input type="text" name="Shopping_Orders_OrderInfo_Discount_DiscountValue" value="10">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_NumberofItems" value="1">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_ProductID" value="P5763868">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_ItemName" value="Big Blue Box">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_Price" value="10">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_ProductID" value="P57638262">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_ItemName" value="Big Red Box">
<input type="text" name="Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_Price" value="20">