且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

采用表单字段名称和值创建JSON模式

更新时间:2023-02-19 10:33:40

您可以获取所有输入元素并获取名称,并通过下划线来分割新对象的路径和值,并使用给定的信息构建一个新对象。



allInputs 是一个类似数组的对象,可以通过借用一个数组方法来迭代。
$ b

setValue ,reduce回调检查下一个键是否是一个弦乐数值,并将数组作为默认对象而不是对象。



  function setValue(object,path,value){var last = path.pop(); (kkkk [i + 1]:last)→[]:{(k,k,i,kk)=> o [k] = o [k] || }},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 =textname =Shopping_Orders_OrderInfo_OrderNumbervalue =D0102864>< input type =textname =Shopping_Orders_OrderInfo_ContactIDvalue =AS76372> ;< input type =textname =Shopping_Orders_OrderInfo_OrderDatevalue =01/01/2018>< input type =textname =Shopping_Orders_OrderInfo_Billing_BillingIDvalue =B673472>< input type = textname =Shopping_Orders_OrderInfo_Billing_Namevalue =Fred Smith>< input type =textname =Shopping_Orders_OrderInfo_Delivery_DeliveryIDvalue =D769397>< input type =textname =Shopping_Orders_OrderInfo_D elivery_Namevalue =Joe Blogg>< input type =textname =Shopping_Orders_OrderInfo_Discount_DiscountValuevalue =10>< input type =textname =Shopping_Orders_OrderInfo_OrderProduct_NumberofItemsvalue =1> < input type =textname =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_ProductIDvalue =P5763868>< input type =textname =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_ItemNamevalue =Big Blue Box>< input type =text name =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_0_Pricevalue =10>< input type =textname =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_ProductIDvalue =P57638262>< input type =textname =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_ItemNamevalue = Box>>< input type =textname =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_Pricevalue =20>  


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)

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