具有分层输出的 Javascript JSON 横向

Question

我正在尝试读取 JSON 模式，但似乎无法弄清楚如何将所有先前对象等输出到层次结构中。

这是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": "1",
      "Items": {
        "Item": {
          "ProductID": "P5763868",
          "ItemName": "Big Blue Box",
          "Price": "10",
        }
      }
    }
   }
  }
 }
}

添加多个项目数组[]

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

在以下 javascript 函数中，我尝试生成输出结构 Object_nestedObject_Keyname，如下面的示例所示。请注意，JSON 是与其他数据一起的 Ajax 调用，但我只需要遍历购物对象。

 function js_traverse(o) {
 var type = typeof o 
 if (type == "object") {

    for (var key in o) {

        console.log("key: ", key)
        js_traverse(o[key])
    }
  } else {
    console.log("value: ",o)
  }
 }

 js_traverse(data['Shopping']); <- above scheme 

我正在尝试在树结构的控制台日志中创建以下输出

 Orders
 Orders_OrdersInfo
 Orders_OrdersInfo_OrderNumber
 Orders_OrdersInfo_ContactID
 Orders_OrdersInfo_OrderDate
 Orders_OrdersInfo_Billing
 Orders_OrdersInfo_Billing_BillingID
 Orders_OrdersInfo_Billing_Name
 Orders_OrdersInfo_Delivery
 Orders_OrdersInfo_Delivery_DeliveryID
 Orders_OrdersInfo_Delivery_Name
 Orders_OrdersInfo_Discount
 Orders_OrdersInfo_Discount_DiscountValue
 Orders_OrdersInfo_OrderProduct
 Orders_OrdersInfo_OrderProduct_NumberofItems
 Orders_OrdersInfo_OrderProduct_Items
 Orders_OrdersInfo_OrderProduct_Items_Item
 Orders_OrdersInfo_OrderProduct_Items_Item_ProductID_1 <-- increment number at end if multiple item
 Orders_OrdersInfo_OrderProduct_Items_Item_ItemName_1 <-- increment at end if multiple item
 Orders_OrdersInfo_OrderProduct_Items_Item_Price_1 <-- increment at end if multiple item

Answer 1

您可以通过检查值和类型来使用递归方法，然后采用 kthe 键或显示对象的路径。

function getKeys(object) {
    function iter(o, p) {
        if (o && typeof o === 'object') {
            Object.keys(o).forEach(k => iter(o[k], p.concat(k)));
        } else {
            console.log(p.join('_'));
        }
    }
    iter(object, []);
}

var object = { 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" }] } } } } } };

getKeys(object);

.as-console-wrapper { max-height: 100% !important; top: 0; }

用于从给定数组中生成带有键和值的数组/对象的附加函数。这适用于检查给定键是否为数字。

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

var object = { 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" }] } } } } } },
    values = getValues(object),
    objectFromValues = {};

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

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

.as-console-wrapper { max-height: 100% !important; top: 0; }