Question

我有一个由JSON响应生成的表单，每个字段名称（Shopping_Orders_OrderInfo_ContactID）包含一个嵌套的对象结构

所以例如这个JSON部分

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

将构造以下字段名称

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

我需要一个Javascript函数来获取上面的字段名称及其值，并重建如下的JSON方案。基本上它会查看字段名称，并使用值来计算嵌套对象/数组和键。

 {
  "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",
        }
      ]
     }
    }
   }
  }
 }
}

以下是我试图反映上述过程的功能

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)

Answer 1

您可以获取所有输入元素并获取名称，并使用下划线将其拆分为新对象和值的路径，并使用给定信息构建新对象。

<div class="col-6">是一个类似于对象的数组，可以通过借用数组方法进行迭代。

在allInputs中，reduce回调检查下一个键是否为弦数，并将数组作为默认对象而不是对象。

setValue

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);

获取表单字段名称和值以创建JSON模式

1 个答案: