更新时间: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">