采用表单字段名称和值创建JSON模式 [英] Taking form field names and values creating a JSON Schema
本文介绍了采用表单字段名称和值创建JSON模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个由JSON响应生成的表单，并且每个字段名称（Shopping_Orders_OrderInfo_ContactID）都包含一个嵌套对象结构
，例如这个JSON部分
购物：{
订单：{
OrderInfo：{
OrderNumber ：，
会构成以下字段名称
< 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_Delivery_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 =textname =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 =Big Red Box>
< input type =textname =Shopping_Orders_OrderInfo_OrderProduct_Items_Item_1_Pricevalue =20>
我需要一个Javascript函数来抓取上面的字段名和它的值，并重建一个JSON方案下面。基本上，它会查看字段名称并找出嵌套的对象/数组和键值。
{
购物：{
Orders：{
OrderInfo：{
OrderNumber：D0102864，
ContactID：AS76372，
OrderDate：01/01/2018，
Billing：{
BillingID：B673472，
Name：Fred Smith
} ，
Delivery：{
DeliveryID：D769397，
姓名：Joe Blogg
}，
折扣：{
DiscountValue：10
}，
OrderProduct：{
NumberofItems：2，
Items：{
Item：[
{
ProductID：P5763868，
ItemName：Big Blue Box，
Price：10，
$，
{
ProductID：P57638262，
ItemName：Big Red Box，
Price：20，
}
]
}
}
}
}
}
}
im试图反映上述过程
pre $函数setValue（对象，路径，值）{
var last =路径。弹出（）;
$ b path.reduce（（o，k，i，kk）=> o [k] = o [k] ||（isFinite（i + 1 in kk？
kk [ i + 1]：last）？[]：{}），object）[last] = value;
$ b $ 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，[]）;
返回结果;
}
////这里我不知道如何从
var object = data ['shopping']，
values = getValues（object），
objectFromValues = {}; （（[keys，value]）=> setValue（objectFromValues，keys，value））;
values.forEach
console.log（objectFromValues）;
console.log（values）
解决方案
您可以获取所有输入元素并获取名称，并通过下划线来分割新对象的路径和值，并使用给定的信息构建一个新对象。
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">
这篇关于采用表单字段名称和值创建JSON模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
